el-table树形表格懒加载 子节点修改数据后局部刷新

el-table树形表格懒加载 子节点修改数据后局部刷新

给table绑定ref load方法用于实现懒加载
data中定义maps:new Map()

<el-table v-loading="loading" row-key="id" :data="deptList" :tree-props="{hasChildren:'child'}" lazy :load="loadTable" ref="table">
......
</el-table>

懒加载子节点

loadTable(tree, treeNode, resolve){
      this.maps.set(tree.id,{tree,treeNode,resolve})
      getTreeData(tree.id).then(res=>{
        resolve(res.data)
      })
    },

在子节点增删改查后 调用局部刷新方法

 handleDelete(row) {
      const userId = row.id
      this.$modal.confirm('是否确认删除'xxx'？').then(function() {
        return deleteDept(userId)
      }).then(() => {
        this.refreshRow(row.parentId)
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
     // 局部刷新列表
    refreshRow(row) {
      const { tree, treeNode, resolve } = this.maps.get(row.parentId)
      this.loadTable(tree, treeNode, resolve);
    },