Vue+Element中Table树形数据懒加载删除后数据动态更新

今天在做项目时遇到了一个问题，那就是table树形数据，展开后懒加载的子节点，当我删除节点时，树形结构却不能及时的更新。网上找了一个很好用的方法，非常感谢作者，原文如下：Vue+Element中Table懒加载删除后数据动态更新

image.png

解决方法1：刷新页面

有两种刷新页面的方法：

1. 用vue-router重新路由到当前页面，页面是不进行刷新的，但在网络不好的情况，会造成短暂的白屏。
2. 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好。

解决方法2

1. data中添加定义

maps: new Map()

2. 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)
            })
        },

3. 删除方法

        // 删除
        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 )
            })
        },

通过这种方法，的确有效