日常开发记录-elementUI树形控件节点过滤

本文介绍了如何使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值