修改element ui tree 搜索功能，实现分级搜索，关键字高亮

最新推荐文章于 2024-09-23 17:14:17 发布

进了吧

最新推荐文章于 2024-09-23 17:14:17 发布

阅读量5.5k

点赞数 7

分类专栏： Vue 前端插件文章标签： element tree vue

本文链接：https://blog.csdn.net/qq_40247562/article/details/102399298

版权

前端同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Vue

22 篇文章 1 订阅

订阅专栏

插件

4 篇文章 0 订阅

订阅专栏

element ui 里面的tree 自带的搜索功能是默认搜索的全部数据，有关键字的显示，没有的不显示

需求：

在element UI tree 原有功能不变的情况下新加

1）搜索 tree 时，如果非叶子节点里面含有关键字，那么就显示此节点下的所有节点，此节点下的所有节点不参与过滤；

2）所有节点里面含有的关键字都高亮

效果如下：

实现：

1）修改插件自带的 filterNode 方法，官方文档里面说明有一个参数为node ,node里面可以得到当前级数和父级元素

2）利用正则动态匹配关键字，然后高亮

filterNode (value, data, node) {
      // 如果共有四级菜单
      console.log(value, data, node)
      if (!value) return true
      let ifOne = data.name.indexOf(value) !== -1
      let ifTwo = node.parent && node.parent.data && node.parent.data.name && (node.parent.data.name.indexOf(value) !== -1)
      let ifThree = node.parent && node.parent.parent && node.parent.parent.data && node.parent.parent.data.name && (node.parent.parent.data.name.indexOf(value) !== -1)
      let ifFour = node.parent && node.parent.parent && node.parent.parent.parent && node.parent.parent.parent.data && node.parent.parent.parent.data.name && (node.parent.parent.parent.data.name.indexOf(value) !== -1)
      let resultOne = false
      let resultTwo = false
      let resultThree = false
      let resultFore = false
      if (node.level === 1) {
        resultOne = ifOne
      } else if (node.level === 2) {
        resultTwo = ifOne || ifTwo
      } else if (node.level === 3) {
        resultThree = ifOne || ifTwo || ifThree
      } else if (node.level === 4) {
        resultFore = ifOne || ifTwo || ifThree || ifFour
      }
      return resultOne || resultTwo || resultThree || resultFore
    },

      <el-input placeholder="输入关键字进行搜索"
                class="filter"
                v-model="filterText">
      </el-input>
      <el-tree :data="treeData"
               :props="defaultProps"
               icon-class="tree-icon el-icon-caret-right"
               :accordion="true"
               :highlight-current="true"
               :filter-node-method="filterNode"
               @node-click="handleNodeClick"
               ref="tree">
        <span class="custom-tree-node keywords_em"
              slot-scope="{ node, data }">
          <span v-if="!filterText">{{data.name}}</span>
          <span v-if="filterText"
                v-html="data.name.replace(new RegExp(filterText,'g'),`<em>${filterText}</em>`)"></span>
        </span>
      </el-tree>