element-ui树形控件节点过滤实现选择高亮

场景：在使用element-ui树形控件时，有时我们需要这样的效果

我们的实现思路是：在原来的过滤基础上再加一层过滤器，

filters: {
    filterReal(value, key) {
      const ind = value.indexOf(key);
      if (value.includes(key))
        return (
          value
            .split("")
            .slice(0, ind)
            .join("") +
          '<span class="key-word">' +
          key +
          "</span>" +
          value
            .split("")
            .slice(ind + key.length)
            .join("")
        );
        //console.log(value)
      return `<span>${value}</span`;
    },
  },

过滤器是上来就执行，当我们输入了比如2-1时，就会对node.label进行筛选。该变红的就会变红。

下一步，我们就会使用element-ui自带方法filter和filter-node-method进行选择放到页面上。

TIPS：过滤器在html里边不能直接使用，需v-html="options.filters.filterNodeStr(参数，参数)"

我理解错误的地方（可以给大家提个醒）：当时想的是过滤器里边的value是已经筛选过的值，比如输入2-1，那么value就是一级2和二级2-1，这个value是element-ui的过滤方法传给我们的，其实犯这种错误的原因是忘记了，过滤器是一上来就执行，但是element筛选只有filterText改变了才会执行

代码：

<template>
  <div id="app">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      class="filter-tree"
      :props="defaultProps"
      default-expand-all
      :data="data"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <template v-slot="{ node }">
        <span class="custom-tree-node">
          <span
            v-html="$options.filters.filterReal(node.label, filterText)"
          ></span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script>

export default {
  name: "app",
  filters: {
    filterReal(value, key) {
      const ind = value.indexOf(key);
      if (value.includes(key))
        return (
          value
            .split("")
            .slice(0, ind)
            .join("") +
          '<span class="key-word">' +
          key +
          "</span>" +
          value
            .split("")
            .slice(ind + key.length)
            .join("")
        );
        //console.log(value)
      return `<span>${value}</span`;
    },
  },
  //这个作用是控制显示需要和filterNode配合使用
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  components: {
    // exTable,
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
  data() {
    return {
      filterText: "",
      a: [],
      data: [
        {
          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",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

<style>
.key-word {
  color: red;
}
</style>