elementUI el-table树形数据删除子节点刷新问题

最新推荐文章于 2024-06-24 14:45:43 发布

Miss ф

最新推荐文章于 2024-06-24 14:45:43 发布

阅读量2.5k

点赞数 4

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/Mi_si/article/details/126894138

版权

表格数据通过后台接口获取，是否有子列表数据根据hasChildren判断。
增删改全部重新请求数据，不做页面操作。子列表新增修改数据没有问题，删除时接口请求成功，但删除子列表数据无法更新子列表。

解决办法：
1.声明变量

data() {
	return {
		maps: new Map()
	}
}

删除调用时添加：
完整代码


this.$confirm("您确定要执行删除操作吗？", "提示", {
	confirmButtonText: "确定",
	cancelButtonText: "取消",
	type: "warning",
})
.then((action) => {
	if (action == "confirm") {
		axios.delById(scope.id).then((res) => {
			this.$message({
				type: "success",
				message: "删除成功!",
			});
			//原来是直接this.initTable();
			//新增部分-----start
			if (scope.pId) {
				const { tree, treeNode, resolve } = this.maps.get(scope.pId); //根据父级id取出对应的节点数据
				//将对应父节点下的数据清空，需要在el-table中增加参数 `ref="tableref"`
				this.$set(this.$refs.tableref.store.states.lazyTreeNodeMap, tree.id, []);
				//实现数据的重新加载
				this.load(tree, treeNode, resolve)	
			}else{
				//pId为0时重新加载表格
				this.initTable();
			}
			//-------end
		});
	}
})
.catch(() => {
	this.$message({
		type: "info",
		message: "已取消删除",
	});
});

懒加载存储

load(tree, treeNode, resolve) {
	this.maps.set(tree.id,{tree, treeNode, resolve})//新增
	axios.getByPid({pId:tree.id}).then((res) => {
		resolve(res.data)
	});
}