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)
      }
    }
}