Element Plus + Vue3 踩坑 -- el-Table树形数据懒加载新增、编辑、删除子集不实时刷新问题

项目场景：

问题描述

问题一、设置 Table 的 lazy 属性为 true 与加载函数 load，可实现懒加载树形数据。但在展开子集后新增、编辑、删除，却不实时更新数据。

问题二、解决以上问题后，发现当子集只剩一条数据时，删除这条数据依旧不触发数据刷新。

原因分析：

懒加载 load 定义的函数只有在第一次打开子节点的时候才会触发，其他时候不会触发，所以导致了数据不实时刷新。

解决方案：

当处理数据后，重新手动调用 load 函数，已到达子集数据刷新的目的。
设置 const maps = new Map()在 load 函数中将 row, treeNode, resolve 存储下来。

const maps = new Map()
const tableRef = ref(null);
const load = (
    row,
    treeNode,
    resolve
) => {
    maps.set(row.id, {row, treeNode, resolve})
    setTimeout(() => {
        api({
            parentId: row.id,
            ...props.params
        }).then(res => {
            const data = res.data.data;
            resolve([...data])
        })
    }, 1000)
}

当新增、编辑、删除后调用 refresh 方法，并传入被处理数据的 parentId，maps.get(parentId)将对应的参数取出，传参给 load 函数。

const refresh = (parentId) => {
    getTableData(page, formInline);
    const map = maps.get(parentId);
    if(map) {
        load(map.row, map.treeNode,map.resolve)
    }
}

当子集删除最后一条数据时，需要单独进行处理。判断返回的数据是否为空，为空时手动置空。

if(data.length > 0) {
  resolve([...data])
} else {
  tableRef.value.store.states.lazyTreeNodeMap.value[row.id] = []
}

（以上，第二个问题导致的原因待我细细研究。）