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

在使用element-ui的树形表格(el-table)懒加载(lazy)，并使用了懒加载，出现了一个问题，在对当前节点添加、修改、删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。

<el-table
    v-loading="loading"
    row-key="id"
    :data="dataList"
    lazy
    :load="load"
    ref="table"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    ......
</el-table>
<!--删除按钮-->
<el-button
    type="text"
    style="color: #ff6d6d"
    @click="delete(row)">
    删除
</el-button

>

首先，在data(){}中定义一个maps:new Map();

data(){
    return(){
        maps: new Map(),
        dataList: []
    }
}

然后，当数据进行懒加载时把点击的节点数据存储在map中，点击删除时再从map中获取节点数据，进行数据刷新操作。

methods:{
    // 懒加载
    load(tree, treeNode, resolve) {
        // getData()是懒加载获取数据的方法
        this.getData(tree, resolve);
        // 接下来是map的set存储
        // -- key值是点击节点的id
        // -- value是load接收的参{tree,treeNode,resolve}
        this.maps.set(tree.id, { tree, treeNode, resolve })    
    },
    // 懒加载动态获取数据
    getData(tree, resolve){
        let { data: res } = await this.$http.get('sys/getList', {
            params: {
              id: tree.id
            }
        })
        if (!res.data) {
            return
        }
        resolve(
            res.data.map((item) => {
                return {
                    ...item
                }
            })
        )
    },
    // 删除方法
    delete(row){
        this.refreshLoad(item.parentId)
    },
    // 获取map中的数据，重新加载
    refreshLoad(parentId){
        // 根据父级ID取出对应节点数据
        const { tree, treeNode, resolve } = this.maps.get(parentId)
        // 根据父节点id更新子节点数据
        // -- 先给table标签添加一个ref="table1"
        // -- parentId: 就是父节点的ID
        // -- []：就是子节点的数据
        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])
        if (tree) {
            // 将取出对应数据再传给load方法，重新加载数据。
            this.load(tree, treeNode, resolve);
        }
    }
}