vue+vxe-table实现前端查询树结构查询的关键字变色

查询框输入要查询的关键字以后点击查找
展示查找的元素并且将关键字置红

这边我使用的是vex-table的树形表格中=>实现树结构深层查找

<template>
  <a-card>
    <a-row :gutter="16">
      <a-col :span="5">
        <a-row>
          <a-col span="20">
            <a-input placeholder="名称" size="small" allowClear v-model="filterTitle">
              <a-icon slot="prefix" type="search" />
            </a-input>
          </a-col>
          <a-col span="4">
            <vxe-button size="mini" @click="setTreeExpand" style="height: 24px;">查找</vxe-button>
          </a-col>
        </a-row>
        <vxe-table ref="xTree" size="mini" max-height="600" highlight-hover-row :loading="loading" :data="tableData" :tree-config="{children: 'children',line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
          <vxe-table-column field="name" title="名称" tree-node>
            <template v-slot="{ row }" style="height:22px">
              <span>
              //给元素加了图标
                <template v-if="row.children && row.children.length">
                  <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
                </template>
                <template v-else>
                  <i class="tree-node-icon fa fa-file-o"></i>
                </template>
                <span style="margin-left: 4px;">
                  <a-button type="link" v-html="row.name"></a-button>
                </span>
              </span>
            </template>
          </vxe-table-column>
        </vxe-table>
      </a-col>
    </a-row>
  </a-card>
</template>

import XEUtils from 'xe-utils'
export default {
  data() {
    return {
      filterTitle: '',
      loading: false,
      originData: [],
      tableData: [],
    }
  },
  created() {
    this.loading = true
    setTimeout(() => {
      const list = [
        { id: 1, name: '从入门到放弃1' },
        {
          id: 2,
          name: '从入门到放弃2',
          children: [
            { id: 3, name: '从入门到放弃2-1' },
            { id: 4, name: '从入门到放弃2-2' },
            {
              id: 5,
              name: '从入门到放弃2-3',
              children: [
                {
                  id: 6,
                  name: '从入门到放弃2-3-1',

                  children: [{ id: 7, name: '从入门到放弃2-3-1-1' }],
                },
                { id: 8, name: '从入门到放弃2-3-2' },
                { id: 9, name: '从入门到放弃2-3-3' },
              ],
            },
          ],
        },
        { id: 11, name: '从入门到放弃3' },
        { id: 11, name: '从入门到放弃4' },
      ]
      this.loading = false
      this.originData = list
      this.tableData = this.originData
    }, 300)
  },
  methods: {
    setTreeExpand() {
      // 查找关键字展开与之相关的所有节点，其他无关系的节点关闭掉
      //组件本身的事件,使用了xe-utils中的searchTree方法,从树结构中根据回调查找数据 
      const filterName = XEUtils.toString(this.filterTitle).trim().toLowerCase()
      if (filterName) {
        const options = { children: 'children' }
        const searchProps = ['name']
        this.tableData = XEUtils.searchTree(
          this.originData,
          (item) => searchProps.some((key) => XEUtils.toString(item[key]).indexOf(filterName) > -1),
          options
        )
        //替换查找关键字的样式
        //这里我用了xe-utils中的eachTree方法,从树结构中遍历数据的键、值、路径,遍历数据中的name字段,将其关键字替换成有红色样式的
        this.$nextTick(() => {
          this.$refs.xTree.setAllTreeExpand(true)
        })
        let replaceReg = new RegExp(filterName, 'g')
        let replaceString = `<span class="search-text" >${filterName}</span>`
        XEUtils.eachTree(this.tableData, (item) => (item.name = item.name.replace(replaceReg, replaceString)))
      } else {
        this.tableData = this.originData
      }
    },
  },
}