vue+element tree懒加载更新数据的示例代码

<el-tree
   :data="treeList"
   ref="tree"
   class="vue-tree"
   lazy
   :load="loadNode"
   :highlight-current="true"
   :node-key="nodeKey"
   @node-click="nodeClick"
   :expand-on-click-node="false"
   :props="defaultProps"
 ></el-tree>

// 懒加载获取树形结构
loadNode(node, resolve) {
//调用接口时，我们的需求是第一级传参为0，后面为当前节点的唯一表示id，可以根据需求而定
// node.level为0时，就是tree的第一级
 const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid
 getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => {
   resolve(
     data.data.map(item => {
       return {
         ...item,
         leaf: !item.hasChildren // 此参数用来判断当前节点是否为叶子节点
       }
     })
   )
 })
},

defaultProps: {
  children: 'children',
  label: 'spaceName',
  isLeaf: 'leaf'
}

/**
 * 单独刷新节点
 * guid: 当前节点的父级唯一标识节点
 */
refreshTreeNode(guid) {
  let node = this.$refs.tree.getNode(guid)
  if (node) {
    node.loaded = false
    node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
  }
},

data(){
    return{
        maps: new Map(), // 先在你的data内搞一个map用于存储接下来必要的数据
    }
}

   load(tree, treeNode, resolve) {
      if (treeNode) {
         // 这是我的方法和接口不必照搬只需要将this.maps.set()这一句放到相应位置即可
        selectBom({
          code: tree.code,
          ifMba: this.ifMba,
        }).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
            this.maps.set(tree.code, { tree, treeNode, resolve }); 
            // 上面这一句是将你每一次展开的节点存到你刚刚在data内定义的map内，其他的不重要
            // tree.code是唯一值
          }
        });
      }
    },

    refreshLoadTree(pId) {
      // 根据更改节点的父ID取出相应数据
      const { tree, treeNode, resolve } = this.maps.get(pId);
       
      this.$set(
        // 不要忘记在你的table上写ref
        this.$refs.LoadTable.store.states.lazyTreeNodeMap, 
        pId,
        []
      );
      if (tree) {
        // 将取出对应数据再传给load方法
        this.load(tree, treeNode, resolve); 
      }
    },

//最后只需要在你做修改删除或者其他操作的地方调用即可
//括号内传操作节点的父节点（如果自己拿不到可以在接口成功时让后端返回）
this.refreshLoadTree(res.data.code);