element ui树节点懒加载及删除新增搜索操作

当树节点数据量过大时，进入该页面在请求树节点会比较费时间，树节点加载缓慢，影响用户体验。可以通过element ui的 懒加载树节点

html 部分代码

注意：懒加载并不是通过:data:items 来展示数据，放在这里是搜索是需要。

<el-tree
   :data="items"
   ref="tree"
   :props="replaceFields"
   node-key="id"  //唯一键
   :expand-on-click-node="false"
   :default-expanded-keys="expandKeys"  //默认展开节点
   lazy //懒加载
   :load="loadNode"  //懒加载获取数据方法
   :highlight-current="true"
   :current-node-key="selectedId"
   @node-click="onTreeClick"
   >
 </el-tree> 

js部分代码，获取树节点数据

 // 树节点懒加载
 loadNode(node, resolve) {
    if (node.level === 0) {
    // this.chooseNode  和 resolve 是在data中定义，后续新增删除搜索等操作会用到
        this.chooseNode = node  // 当前节点
        this.resolve = resolve
        this.getNodes(0).then((value) => {
        //这里是项目有需求默认展开一级节点，因此后端需要将树节点第一层
        //和第二层数据返给前端，前端再通过获取第一级父节点id，来默认展开第一级树节点
        this.expandKeys = value.map(item=>{
             return item.id
         }) 
          return resolve(value);
        });
      } else {
        // init leaves of tree
          this.getNodes(node.data.id).then((value) => {
            return resolve(value);
          });
        
      }
    },
    // 获取对应子节点
    getNodes(parentId) {
      return new Promise((resolve, reject) => {
        let url = ''        //通过接口获取数据
        this.$http.get(url)
          .then((response) => {
            resolve(response.data.data);
          })
          .catch((error) => {
            this.$Message.error("获取数据失败！");
            reject(error);
          });
      });
    },

至此，懒加载树节点就实现了，但是测试 树节点模糊查询、新增、编辑时，发现有问题。

1、模糊查询时后端会把符合要求的树节点全部返给前端，但是因为这时候树节点还是懒加载，所以模糊查询获取的数据无法展示，具体代码如下：

// 搜索树节点
onSearch(){
   // 首先，通过判断搜索内容来设置懒加载的开启与关闭
   this.$refs.tree.$data.store.lazy = !this.searchName
   let msg = this.$Message.loading({
       content:'正在获取数据',
       duration:0
    })
    if(this.searchName.length > 0){
       //  模糊查询获取数据具体操作
       // 再给树节点data 赋值
       this.items = res.data.data
     }else {
        this.items = []
        setTimeout(() => {
        //注意使用异步，否则 this.items = [],会将你留下一行代码懒加载的数据一起清空
          this.loadNode(this.chooseNode,this.resolve)
          msg()
        }, 50)
    }
      
},

2、新增时，需要对树节点进行刷新，可以再调用一遍onSearch方法，也可以在新增成功之后写上如下代码：

this.items = []
setTimeout(() => {
 //注意使用异步，否则 this.items = [],会将你留下一行代码懒加载的数据一起清空
   this.loadNode(this.chooseNode,this.resolve)
}, 50)
      

3、删除时，删除成功后也需要对树节点进行刷新，可以调用上述更新树节点的方法，也可以通过如下操作dom移除节点，代码如下：

remove(id){
   const { tree } = this.$refs;
   tree.remove(id);
 }

 有问题欢迎指出~