树形结构查询filter-node-method用法

最新推荐文章于 2025-05-19 18:10:41 发布

原创最新推荐文章于 2025-05-19 18:10:41 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

本文介绍了如何在Vue应用中使用ElementUI的el-tree组件，通过定义filterNode方法实现在树形结构中进行输入名称的搜索功能，以便快速定位到目标节点。

对于树形结构，输入名称搜索功能

 <el-tree :data="sdtOptions" :props="defaultProps"  :filter-node-method="filterNode" ref="tree"/>

定义绑定filterNode方法

// 筛选节点
    filterNode(value, data, node) {
      if (!value) return true
      let parentNode = node.parent
      let labels = [data[this.defaultProps.label || "name"].toLowerCase()]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label.toLowerCase()]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value.toLowerCase()) !== -1)
    },

页面展示效果