今天在做项目时遇到了一个问题，那就是table树形数据，展开后懒加载的子节点，当我删除节点时，树形结构却不能及时的更新。网上找了一个很好用的方法，非常感谢作者，原文如下：Vue+Element中Table懒加载删除后数据动态更新
image.png
解决方法1：刷新页面
有两种刷新页面的方法：
- 用vue-router重新路由到当前页面，页面是不进行刷新的，但在网络不好的情况，会造成短暂的白屏。
- 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好。
解决方法2
- data中添加定义
maps: new Map()
- methods中的load方法
load(tree, treeNode, resolve) {
const pid = tree.id
this.maps.set(pid,{ tree, treeNode, resolve }) //将当前选中节点数据存储到maps中
this.$http.get(`/knowledgeBase/getListByPid/${pid}`).then( res => {
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
let menuList = res.data.data
resolve(menuList)
})
},
- 删除方法
// 删除
deleteKnowledge(arr,row){
this.$http.delete('/knowledgeBase',{
data:arr
}).then(res => {
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
this.$message.success('删除成功')
this.getKonwledgeBaseList() // 重新获取table表格
const {pid} = row //取出当前删除行的pid
const { tree, treeNode, resolve } = this.maps.get(pid) //根据pid取出对应的节点数据
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, []); //将对应节点下的数据清空，从而实现数据的重新加载
this.load( tree, treeNode, resolve )
})
},
