解决elementui-plus table树懒加载的局部刷新问题

局部刷新的实现：修改子节点数据后，需要再次请求下父节点来实现局部刷新 。

具体方法：

1.先设置table的懒加载，这里不再赘述了，设置下lazy和load方法即可。

2.需要定义个map变量用来存储加载过的父节点信息，以及指定下table的ref。

const loadMap = new Map();
const mainTable = ref();//table的ref

3.在load方法中将获取到的节点数据添加到loadMap变量中。

 const load = async (row: any, treeNode: any, resolve: any) => {
      
      //将获取到的节点数据添加到loadMap变量中
      loadMap.set(row.parentId, { row, treeNode, resolve });

      const param = {
        parent_id: parseInt(row.parentId),
        genFlag: "nextLev",
      };

      const result: any = await api.getData(param);

      resolve(result.data);
    };

4.定义个方法reloadTree，

主要功能：根据parentId从loadMap中获取信息{row,treeNode,resolve}。然后再根据parentId清空之前懒加载过的数据（通过ref获取lazyTreeNodeMap），再去请求懒加载方法(load)重新获取子级的数据。

    
    const reloadTree = (parentId: any) => {
      parentId = parentId ? parseInt(parentId) : 0;      
      const { row, treeNode, resolve } = loadMap.get(parentId);
      mainTable.value.store.states.lazyTreeNodeMap[parentId] = [];//清空节点的数据
      load(row, treeNode, resolve);
      
    };

5.这里会有个问题。就是当删除最后一个子节点时会发现数据删除成功，但是没有刷新成功。我想到的解决办法：

    通过ref获取table的子节点数，如果只剩一个，则将lazytreeNodeMap.value中对应parentId的数据清空。如果剩多个，就不清空value下的内容，只清空lazytreeNodeMap中对应parentId的数据。

   不过也有个弊端，就是如果清空value里的内容，就会有闪烁的效果，所以这个是需要根据子节点的个数来分别处理更好。

    
    const reloadTree = (parentId: any) => {
      parentId = parentId ? parseInt(parentId) : 0;      
      const { row, treeNode, resolve } = loadMap.get(parentId);

          //通过ref获取table的子节点数
          if (
            mainTable.value.store.states.lazyTreeNodeMap.value[parentId]
              .length > 1
          ) {
            //说明该节点下有多个子节点
            mainTable.value.table.store.states.lazyTreeNodeMap[parentId] = [];
          } else {
            //说明该节点只有一个节点
            mainTable.value.store.states.lazyTreeNodeMap.value[parentId] =
              [];
          }

      load(row, treeNode, resolve);
      
    };

6.在增删改子数据时获取父级id，然后调用reloadTree方法。