vue el-tree 筛选树形结构，关键字高亮

<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    <el-tree
      ref="tree"
      :data="treeListData"
      :props="props"
      node-key="id"
      highlight-current :filter-node-method="filterNode"
      :default-expanded-keys="defaultExpandedKeys"
    >
      <span slot-scope="{ node }">
        <span v-if="!filterText">{{ node.label }}</span>
        <span
          v-if="filterText"
          v-html="
            node.label.replace(
              new RegExp(filterText, 'g'),
              `<font style='color:red'>${filterText}</font>`
            )
          "
        />
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

  },

  data() {
    return {
      filterText: "",
      defaultExpandedKeys: [],
      treeListData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      props: {
        label: "label",
        children: "children",
      },
    };
  },
};
</script>