elementUI el-tree loadnode懒加载更新节点

最新推荐文章于 2024-09-06 14:11:48 发布

听听起床啦_

最新推荐文章于 2024-09-06 14:11:48 发布

阅读量2.5k

点赞数

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/a965412234/article/details/126891429

版权

在Vue项目中遇到El-Tree组件使用懒加载时，新增、删除或编辑节点后无法正确更新节点的问题。通过保存并重新使用resolve解决了这个问题。当调用新增节点接口时，找到对应的resolve并重新加载该节点，确保数据和视图的一致性。

摘要由CSDN通过智能技术生成

在项目中使用了el-tree 懒加载节点新增、删除、编辑后要更新该节点。
使用loadNode(node, resolve)重新渲染，resolve会指向上一次展开的节点。也就是说，在我点击了B节点，新增子节点后，接口数据添加是对的，但是页面会把新增的子节点加到上一次展开的A节点，B节点就会为空。
所以解决办法是把resolve都存起来。

<el-tree :load="loadNode" lazy node-key="id" :key="cascaderKey" 
ref="tree" :props="defaultProps" @node-click="handleCataNodeClick">
...
</el-tree>

 allResolve: any[] = []; //定义一个变量，把所有resolve放在一起
 
 async loadNode(node, resolve) {
      let pid = node.data.id;
      this.root_node = node;
      this.root_resolve = resolve;
      const treeData: any = await this.cataList(pid, node.level);
      this.resource = treeData;
      let findId = this.allResolve.findIndex((item) => item.id == pid);
      if (findId == -1) { //把resolve存起来
        this.allResolve.push({
          id: pid,
          resolve: resolve,
        });
      }
      resolve(treeData);
  }

// 在调用新增节点接口里写以下代码
 this.root_node.childNodes = [];
 let nowResolve = this.allResolve.filter((item) => {
   return item.id == this.nowData.id; //查找对应的resolve
 });
 this.loadNode(this.root_node, nowResolve[0].resolve); //重新加载对应的节点