Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新

前言         

 element 树表懒加载在每次对表格进行修改删除等操作后需要刷新表格数据时都需要重新请求，在逐增展开加载，这样对用户来说不太友好所以我们稍微解决一些

第一步：定义一个Map

用来储存表格懒加载每次展开时所点击的当前行{tree,treeNode,resolve}

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

第二步：在load方法内使用map

每次点击展开load方法都会返回{tree,treeNode,resolve}， 定义好map后在每一次执行load方法调用接口成功返回数据后将load返回的参数{tree,treeNode,resolve}储存到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是唯一值
          }
        });
      }
    },

第三步：查询map中对应数据

已经将每次展开load返回的{tree,treeNode,resolve}存储到map中后，我们现在就需要取出来再传给load方法了，调用refreshLoadTree方法时需要给它传一个你所操作节点父节点ID，他会通过这个ID去map中检索出相对应的数据然后再调用load方法传给它以达到局部更新的目的

    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); 
      }
    },

第四步：调用 refreshLoadTree方法

只需要在你修改或删除等操作接口返回成功时调用并传一个操作节点父ID即可实现局部数据更新

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

 这是基础版本，因为本人项目原因会再次之上改动许多并未附上全部（仅作为记录）