vue2.6版本，vxe-virtual-tree实现前端查询树结构查询的关键字变色

原文章：vue+vxe-table实现前端查询树结构查询的关键字变色，EasoneasyChan

vxe-table版本2.6

框架jeecgboot2.3（vue应该为2版本脚手架）

以原文章为例子，发现在vxe-virtual-tree中根本无法变色问题，

原文中变色位置为：
XEUtils.eachTree(this.tableData, (item) => (item.name = item.name.replace(replaceReg, replaceString)))
打印输出后发现只能匹配第一个数据也就是根节点数据，但是并没有以html形式返回，只返回了字符串形式

使用temlate   以及插槽？solts 搜索后变色

导入包仅供自己参考使用

//导入包 以及使用 VXETablePluginVirtualTree 仅供我自己参考 
import XEUtils from 'xe-utils/ctor'
import VXETable from 'vxe-table'
import VXETablePluginVirtualTree from 'vxe-table-plugin-virtual-tree/dist/index.common.js'
import 'vxe-table-plugin-virtual-tree/dist/style.css'
import VXETablePluginAntd from 'vxe-table-plugin-antd'
import 'vxe-table-plugin-antd/dist/style.css'

VXETable.user(VXETablePluginVirtualTree)

  export default {

 全部代码，仅供参考自己在改改，主要实现的是不实时变色，搜索后变色

<template>
  <a-card :loading="loading" >
<a-input-search allowClear @search="onSearch">
    <vxe-virtual-tree
          resizable
          show-overflow
          row-key
          ref="xTree"
          height="500"
          :loading="loading"
          :tree-config="{children: 'childrenList'}"
          border="none"
          :columns="tableColumn">
        <template #title="{row}">
          <div v-html="row.title"></div>
        </template>

    </vxe-virtual-tree>

  </a-card>
</template>

<script>
// 导入只给自己看 
import XEUtils from 'xe-utils/ctor'
import VXETable from 'vxe-table'
import VXETablePluginVirtualTree from 'vxe-table-plugin-virtual-tree/dist/index.common.js'
import 'vxe-table-plugin-virtual-tree/dist/style.css'
import VXETablePluginAntd from 'vxe-table-plugin-antd'
import 'vxe-table-plugin-antd/dist/style.css'

VXETable.user(VXETablePluginVirtualTree)

  export default {
    data() {
      return {
        tableColumn:[
          { field:'title',
            treeNode:true,
            width:1000,
            slots:{
              default:'title'
            }
          }
        ],
        treeData:[
          {title:'1',childrenList:[
            {title:'1.1',childrenList:[
              {title:'1.1.1',childrenList:[]}
            ]}
          ]}
        ],
        treeData1:[]
       //==================
      }
    },
    methods: {
      onSearch(value){
        this.treeData1 = this.treeData
         const filterName = XEUtils.toValueString(value).trim().toLowerCase()
              if (filterName) {
                const filterRE = new RegExp(filterName, 'gi')
                const options = { children: 'childrenList' }
                const searchProps = ['title']
                const rest = XEUtils.searchTree(this.tableData, item => searchProps.some(key => 
                item[key].toLowerCase().indexOf(filterName) > -1), options)
                XEUtils.eachTree(rest, item => {
                  searchProps.forEach(key => {
                    item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`)
                  })
                }, options)
                // 搜索之后默认展开所有子节点
                this.$nextTick(() => {
                  this.$refs.xTree.setAllTreeExpand(true)
                })
      }
    }
  }
</script>
<style scoped>
@import '~@assets/less/common.less';
        .keyword-lighten {
          color: #000;
          background-color: #FFFF00;
        }
</style>