在el-tree懒加载中进行局部刷新-Toy模板网

这篇具有很好参考价值的文章主要介绍了在el-tree懒加载中进行局部刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在el-tree懒加载中进行局部刷新,前端,elementui
在进行懒加载的树组件中，操作子节点新增、修改以及删除操作时，需要对树组件进行局部刷新：文章来源地址https://www.toymoban.com/news/detail-683780.html

 /* 懒加载 */
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 更改树节点选中项执行的数据操作
     // ...
    }
  });
},