Vue 2 + Element UI 的 el-tree 组件，实现搜索功能并高亮匹配的内容

1. 准备数据和搜索关键词

在 data 里存储原始的树形数据，以及用户输入的搜索关键词。

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入关键字" @input="filterTree"></el-input>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree" >
      <span slot-scope="{ node, data }" v-html="highlightText(data.label)"></span>
    </el-tree>
  </div>
</template>

2. JavaScript 逻辑

export default {
  data() {
    return {
      searchText: '',
      treeData: [
        { id: 1, label: "前端开发", children: [{ id: 2, label: "Vue.js" }, { id: 3, label: "React.js" }] },
        { id: 4, label: "后端开发", children: [{ id: 5, label: "Node.js" }, { id: 6, label: "Django" }] }
      ],
      defaultProps: { children: "children", label: "label" }
    };
  },
  methods: {
    // 过滤树节点的方法
    filterNode(value, data) {
      if (!value) return true;
      return data.label.includes(value);
    },

    // 触发树的过滤
    filterTree() {
      this.$refs.tree.filter(this.searchText);
    },

    // 高亮匹配的文本
    highlightText(text) {
      if (!this.searchText) return text;
      const regex = new RegExp(`(${this.searchText})`, "gi");
      return text.replace(regex, `<span style="color: red; font-weight: bold;">$1</span>`);
    }
  }
};

3. 实现效果

• 输入框监听 input 事件，动态过滤 el-tree 的内容
• 匹配搜索关键词的部分高亮显示，使用 v-html 渲染带高亮的文本

这样，每当用户输入搜索内容：
1.只展示匹配的节点及其父节点
2.匹配的内容在树中高亮

🚀 这种方法既实现了搜索功能，又兼顾了高亮显示，是 Vue 2 + Element UI 的 el-tree 组件中较优的搜索方案。