原文章：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-treeresizableshow-overflowrow-keyref="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.treeDataconst 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>