elment树结构tree增加搜索过滤框

た入场券 2023-06-07 03:13 8阅读 0赞

官方文档：

<el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    
    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree">
    </el-tree>
    
    <script>
      export default {
        watch: {
          filterText(val) {
            this.$refs.tree.filter(val);
          }
        },
    
        methods: {
          filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
          }
        },
    
        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'
              }]
            }, {
              id: 3,
              label: '一级 3',
              children: [{
                id: 7,
                label: '二级 3-1'
              }, {
                id: 8,
                label: '二级 3-2'
              }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        }
      };
    </script>

实际运用的时候报了两次错，所以记录一下。

1、filterText方法里面的this.$refs.tree.filter(val);报错

# TypeError: Cannot read property 'filter' of undefined #

2、filterNode方法里面的return data.label.indexOf(value) !== -1;报错

# TypeError: Cannot read property 'indexOf' of undefined #

其实两个错误是同一个原因：filter、indexOf都是函数，但是却不能识别该属性，说明引用对象出错，也就是tree和label引用错误。

首先tree是组件ref里面定义的名称官方文档是tree,

>  ref 属性：
> 
> 首先ref的引用是相当于一个DOM节点（如果是子组件则指向的是其实例），而且是一个string类型的值。  
> 通俗的将就类似于原生js用document.getElementById("\#id")
> 
> 代码中的this.$refs就是搜集所有的ref的一个对象。通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素，并对其进行操作。

而我自己定义的是deptListTree，所以报错应该改成

this.$refs.deptListTree.filter(val);

同理我本身定义的树结构label为name,所以代码为

return data.name.indexOf(value) !== -1;