解决el-table懒加载树新增、删除、修改节点不刷新问题_lazytreenodemap

问题：使用el-table懒加载树，实现对表格数据的新增、修改、删除等操作，但是刷新问题很让人头疼，先是百度解决了修改、删除时的操作，但是新增迟迟不能解决，今天终于解决，记录一下

先定义一个map，存储当前节点的数据

删除代码：

 const { tree, treeNode, resolve } = row.parentId ? this.maps.get(row.parentId) : {}
        this.loadNode(tree, treeNode, resolve, true)

 修改：

 this.row = row.parentId ? this.maps.get(row.parentId) : {}

 在点修改按钮的时候，取到当前节点的map数据,修改成功之后，刷新数据

// 刷新列表
    refresh(row) {
      if (row) {
        // 调用打开子节点的方法
        const { tree, treeNode, resolve } = row
        this.loadNode(tree, treeNode, resolve, true)
      } else {
        this.getList()
      }
    },

一开始我新增完全按照修改逻辑开发的，但是实现不了，原因是，假如给一个没有子节点的节点新增一个子节点的话，这个时候还没有子节点，也就无法调用懒加载方法，所以这种方式行不通，后来多方百度，有建议展开当前节点的方法

  this.$refs['tree'].store.states.treeData[this.form.parentId],
                  'expanded',
                  true
                )

但是这种方式解决不了，有的节点新增还是成功，有的还是不行，所以放弃，最终解决代码如下：

 refreshRow(id) {
      const form = {
        parentId: id
      }
      listDeptByPid(form).then(res => {
        this.$set(this.$refs.tree.store.states.lazyTreeNodeMap, id, res.data)
      })
    },

 id为该节点的父节点id即为要刷新节点的id     res.data为要刷新节点的数据

tree.js的源码奉上：

 此组件在每次更新节点时都调用了该方法，其中的load方法就是我们绑定的懒加载方法；最终发现它实现节点更新的关键在于：

所以自己仿照写一个更新当前节点的子节点方法即可