el-tree懒加载可搜索（调后端接口）

el-tree懒加载el-tree懒加载可搜索（调后端接口）

<div class="search">
  <el-input
    v-model="searchVal"
    @keyup.enter.native="hEnter"
    placeholder="请输入搜索内容"
    suffix-icon="el-icon-search"
  />
</div>

<template>
    <div>
        <el-tree
        ref="tree"
        :props="props"
        :load="loadnode"
        :data="treeData"
        show-checkbox
        :lazy="isLazy"
        ></el-tree>
    </div>
</template>
<script>
import { gettreeData } from ''
export default {
    data() {
        return {
            isLazy: true,  // 控制是否懒加载的标的
            treeData: [],
            props: {
                label: "name",
                isLeaf: (data, node) => {   // 判断复选框是否显示，逻辑看情况
		            if(data.isSelectable) {
		                return true
		            }
		        }, 
                children: 'list'
            }
        }      
    },
    methods: {
    hEnter() {
      // 查询
      let search = this.searchVal;
	      this.isLazy = false;
	      this.gettreeData(1, "", search).then((res) => {
	        this.treeData = res;
	        this.isLazy = true;
	      });
       },
        async gettreeData(i) {
            const res = await gettreeData({
                parentId: i
            });
            return res.data.data.list
        },
        async loadnode(node, resolve) {   // 不需要在created中调用，第一次默认加载tree根节点数据
            if(node.level == 0) {
                let list = await this.gettreeData(100001)  // 调用gettreeData方法，这个方法直接将新的数据return出去
                resolve(list)
            } else {
                this.gettreeData(node.data.id).then(res => {  // 请求当前节点下的子节点
                    if(res){
                        setTimeout(()=>{
                            resolve(res)
                        },200)
                    } else {
                        return resolve([])
                    }
                })
            }
        }

    }
}
</script>

隐藏复选框

/deep/.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    /deep/.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
      display: none;
    }
    /deep/.el-tree-node__content > .el-tree-node__expand-icon {
      padding-right: 0 !important;
    }

问题

el-tree调后端接口查询有一个注意的地方，使用懒加载，那绑定的:data="treeData"就不会起作用，那就没办法更新数据了。

解决

动态设置el-tree是不是懒加载
输入框输入内容，回车。这个搜索的渲染过程我们不要使用懒加载，渲染完成后我们再使用懒加载就可以了。而这个控制是否是懒加载的标的就是isLazy。