先在date里面声明map()
maps: new Map()
在tree-load
函数里面记录子节点数据 this.maps.set(parentId, { tree, treeNode, resolve })
treeLoad(tree, treeNode, resolve) {
const parentId = tree.id;
this.maps.set(parentId, { tree, treeNode, resolve })
getLazyList(parentId).then(res => {
resolve(res.data.data);
});
}
更新子节点数据的函数
updateTable() {
this.maps.forEach((item, key) => {
const { tree, treeNode, resolve } = this.maps.get(key)
this.treeLoad(tree, treeNode, resolve)
})
}
最后在操作回调函数成功之后调用updateTable方法
基本上这个表格树局部刷新数据的流程就是这样,但是在实现的过程中发现一个问题,在更换父级之后,原来父级下面应该没有子节点的情况,视图不会更新
查找了很多资料,发现跟this.$refs.crud.$refs.table.store.states.lazyTreeNodeMap有关
所以要调整一下tree-load
函数,没有子节点的数据,要在this.$refs.crud.$refs.table.store.states.lazyTreeNodeMap中删掉
treeLoad(tree, treeNode, resolve) {
const parentId = tree.id;
this.maps.set(parentId, { tree, treeNode, resolve })
getLazyList(parentId).then(res => {
const lazyTreeNodeMapValue = this.$refs.crud.$refs.table.store.states.lazyTreeNodeMap.value
res.data.data.forEach(item => {
if (!item.hasChildren && lazyTreeNodeMapValue && lazyTreeNodeMapValue[item.id]) {
delete lazyTreeNodeMapValue[item.id]
}
})
resolve(res.data.data);
});
},