日常开发记录-elementUI树形控件节点过滤-优快云博客

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/129253662

本文介绍了如何使用Element UI的El-Tree组件实现关键字过滤功能，通过v-model绑定输入框的值，配合filterNode方法筛选树节点。实例演示了如何在用户输入'三级'和'三级1'时匹配节点标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
<el-button type="primary" @click="click">查询</el-button>
<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>
  </div>
</template>

<script>
export default {
  // watch: {
  //   filterText (val) {
  //     this.$refs.tree.filter(val)
  //   }
  // },

  methods: {
    click () {
      this.$refs.tree.filter(['三级', '三级 1'])
    },
    filterNode (value, data) {
      console.log(...arguments)
      if (!value) return true
      return data.label.indexOf(value) !== -1
      // return value.includes(data.label)
    }
  },

  data () {
    return {
      filterText: '',
      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',
          children: [{
            id: 9,
            label: '三级 2-2-1'
          }, {
            id: 10,
            label: '三级 2-2-2'
          }]
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>