Element ui tree 搜索

搜索框

属性

  :filter-node-method="filterNode"  对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏

           <el-input v-model="filterText"></el-input> 
          <el-tree ref="space"
                   id="modelTree"
                   :data="spaceTreeData"
                   :props="defaultProps"
                   show-checkbox
                   node-key="nodeId"
                   :default-expanded-keys="defaultExpandedKeys"
                   :expand-on-click-node="false"
                   :render-content="renderContent"
                   :filter-node-method="filterNode"
                   @node-click="handleNodeClick"></el-tree>

数据

 data() {
    return {
      //空间树数据
      spaceTreeData: [],
      //默认树结构的输出格式
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      filterText: '',
    }
  },

方法

//监听搜索框的查询参数变化，然后进行过滤
watch:{
  filterText(val) {
      this.$refs.space.filter(val)
    }
}

filter触发过滤事件

methods:{ 
 //优化之后的代码 不管有几级都可以适用,不过用了递归，量太大还是会崩溃，这个后续需要优化
    filterNode(value, data, node) {
      if (!value) {
        return true
      }
      let level = node.level
      let _array = [] //这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value)
      let result = false
      _array.forEach(item => {
        result = result || item
      })
      return result
    },
    getReturnNode(node, _array, value) {
      let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
      isPass ? _array.push(isPass) : ''
      this.index++
      console.log(this.index)
      if (!isPass && node.level != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value)
      }
    }
}