element-ui 树表格懒加载的新增、删除

element-ui官方例子的树表格懒加载没有对表格行的操作，如新增、删除。但是在实际开发中通常都存在操作栏。

此时会遇到的问题是，场景：后端先给顶层数据，单行的子数据可以通过el-table组件的lazy，load获取，此时对单行执行新增子结构的操作，既不能调用获取顶层数据的接口也不能通过load方法直接获取，从而新增的子结构不能正常显示。

解决办法：

element-ui的表格树懒加载源码实现为：

loadData(row, key, treeNode) {
      const { load } = this.table;
      const { lazyTreeNodeMap, treeData } = this.states;
      if (load && !treeData[key].loaded) {
        treeData[key].loading = true;
        load(row, treeNode, (data) => {
          if (!Array.isArray(data)) {
            throw new Error('[ElTable] data must be an array');
          }
          treeData[key].loading = false;
          treeData[key].loaded = true;
          treeData[key].expanded = true;
          if (data.length) {
            this.$set(lazyTreeNodeMap, key, data);
          }
          this.table.$emit('expand-change', row, true);
        });
      }
    }

关键：

this.$set(lazyTreeNodeMap, key, data)
lazyTreeNodeMap：this.$refs.table.store.states.lazyTreeNodeMap
key: 就是row-key
data: 用于更新当前行的子集

所以可以自定义一个更新某一行的方法：

refreshTableRow(groupId){ //刷新表格某一行的数据      axios.get({ url: `xxx/${groupId}` }).then(res => {        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, groupId, res.data.list)      }).catch(err => {              })    },

(如果提示store undefined报错时，在<el-table 加上 ref="table")

删除某子结构需要更新父级结构数据是同样适用

提示：如果存在节点的移位（更换父级节点），记得先更新 原父节点 的子集，再更新 新父节点 的子集，不然控制台会报key值重复的错（重复的key就是被移动的节点）。

参考：blog.csdn.net/weixin_4395…