在el-tree懒加载中进行局部刷新_el-tree数据懒加载下如何实现局部刷新-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46325225/article/details/132583677

本文探讨了在使用ElementUI的懒加载树组件时，如何实现对子节点的新增、修改和删除操作后的局部刷新，确保界面状态的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
在进行懒加载的树组件中，操作子节点新增、修改以及删除操作时，需要对树组件进行局部刷新：

 /* 懒加载 */
async loadNode(node, resolve) {
  if (node.level === 0) {
    // 异步加载根节点数据
    const data = await fn({ parentId: '' });
    resolve(data);
    this.$nextTick(() => {
      const nodeData = node.childNodes[0];
      // 设置选中项
      this.$refs.treeRef.setCurrentKey(data[0].id);
      // 默认展开最外层节点
      nodeData.expanded = true;
      // 自动加载二级节点的数据
      nodeData.loadData();
    });
  } else if (node.level > 0) {
    // 异步加载子节点数据
    const data = await fn({ parentId: node.data.id });
    resolve(data);
  }
},
 
 /* 刷新当前节点 */
refreshTreeNode(node) {
  // 更改当前节点的加载状态
  node.loaded = false;
  // 重新加载数据，入参为加载数据完成后执行的回调函数
  node.loadData(()=>{
    // 设置选中节点（缺少此步骤则会丢失选中状态）
    this.$refs.treeRef.setCurrentKey(node?.data?.id || 0);
  });
},
 
/* 刷新父节点 */
refreshParentTreeNode(node, isChangeSelect) {
  // 更改父节点的加载状态
  node.parent.loaded = false;
  // 重新加载数据
  node.parent.loadData(() => {
    if(!isChangeSelect) {// 不改变选中项
      this.$refs.treeRef.setCurrentKey(node?.data?.id || 0);
    } else {// 选中父节点
     this.currentNode = node.parent;
     this.$refs.treeRef.setCurrentKey(node.parent?.data?.id || 0);
     // todo 更改树节点选中项执行的数据操作
     // ...
    }
  });
},