element el-tree懒加载+搜索

思路

在el-tree 懒加载不兼容自带的查询，需要自己实现。

代码

  <el-input clearable @keyup.native.enter="handelSearch" size="small" v-model="search"> </el-input>
 <el-tree  :data="treeDataShow" ref=“tree” node-key="id"  lazy :load="loadNode"  />
 
 data() {
    return {
       search:'',//搜索参数
      treeData:[],//总数据，由于要前端自己实现搜索，所以需要参数保存所有数据
      treeDataShow :[],//当时不使用懒加载时，el-tree的显示数据
      chooseNode: {},//当前选中节点
      resolve:null,//保存load的resolve方法
    }
  },
  mounted() {
    this.$nextTick(() => {
      //调用loadData方法展开第二层
      let nodedata = this.chooseNode.childNodes[0]
      nodedata.expanded = true
      nodedata.loadData()
    })
  },
  methods: {
    loadNode(node, resolve) {
    if(node.level===0){
    	this.chooseNode = node//保存初始节点
    	this.resolve =resolve//保存resolve方法
    }
    },
    handelSearch(){
    this.$refs.tree.$data.store.lazy = !this.search//根据搜索参数判断是否开启懒加载
      if (this.search) {
      //需要自己实现搜索方法 调用接口/前端js实现
      //处理数据将对应的树形结构数据赋值给treeDataShow 
      } else {
        this.treeDataShow = []//清空原来的treeDataShow数据
        setTimeout(() => {
        //注意使用异步，否则 this.treeDataShow = [],会将你留下一行代码懒加载的数据一起清空
          this.loadNode(this.tree.chooseNode, this.tree.resolve)
        }, 50)
      }
    }
  }