局部刷新的实现:修改子节点数据后,需要再次请求下父节点来实现局部刷新 。
具体方法:
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方法。