ElementUI tree异步树(懒加载)节点新增删除编辑时实现局部刷新

最近弄一个项目，因为树形数据量较大，必须要一层层加载数据。所以采取了树形懒加载方式，但是element官方文档并未找到可直接提供刷新某个树节点的方法，那我直接对某一个子节点进行数据操作总不能整个tree刷新数据吧，这样子体验和操作数据极不方便。

          <el-tree :highlight-current="true" node-key="StandardID" ref="tree"  :load="loadNode" lazy :props="defaultProps" @node-click="handleNodeClick">
            <span slot-scope="{ node }">
                {{ node.label }}
            </span>
          </el-tree>

局部刷新：

async loadNode(node, resolve) {
     //加载数据的方法里把node，reslove存起来
      this.node = node;
      this.resolve = resolve;
      this.node.childNodes = [];

 //获取数据
if (node.level === 0) {
  const listTable = await this.getList(0) // 获取主表数据
  return resolve(listTable)
} else {
  const listData = await this.getList(node.level, node.data.StandardID)
  return resolve(listData)
}
}

手动刷新方法调用

this.loadNode(this.node, this.resolve)

以上方法对某节点新增时数据时局部数据刷新是没问题的，但是对节点某条数据编辑删除时仍是没效果（可能是本人get不到点）。以下是最终采取的解决方案,找到对应的树节点，使用expand方法：

      //对子节点进行更新
      refreshNodeBy(id) {
        let node = this.$refs.tree.getNode(id); // 通过节点id找到对应树节点对象
        node.loaded = false;
        node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
      },

手动局部刷新，调用refreshNodeBy（默认是刷新当前节点下的数据，所以新增时取当前节点id，编辑时取当前节点的父级id，当编辑顶级节点时注意其父级id是没有的，加个判断即可）

//树形新增编辑删除操作刷新
Refresh_standar(data) {
let id_=data==='add'?this.currentData.StandardID:this.EditStandard.SupID
this.refreshNodeBy(id_)      
}

测试几次，没发现问题，可行

 

 

参考：https://www.cnblogs.com/heyefengyin/p/11430073.html