elementplus Table组件的树形数据与懒加载,以及删除子数据后实时更新

				<el-table
					:data="tableData"
					style="width: 100%"
					row-key="id"
					lazy
					:load="load"
					height="95%"
					ref="tableRef"
					:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
					@row-click="handleCurrentChange"
					:highlight-current-row="true"
				>
					<el-table-column prop="vztmc" label="主题名称" />
					<el-table-column prop="ztflmc" label="xxxx分类" />
					<el-table-column label="操作">
						<template #default="scope">
							<el-button size="default" @click="handleEdit(scope.row)">编辑</el-button>
							<el-button text @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

const tableRef = ref(null);
//bug: 删除子数据后,再次打开页面上依然没删掉,解决方法如下

//子数据
//const maps = ref({});//没用也生效了
const load = async (row, treeNode, resolve: (date: any) => void) => {
	//maps.value[row.id] = { tree: row, treeNode, resolve };//没用也生效了
	const res = await getListApi({ parPlanTopicId: row.vztbm });
	if (res.data.length > 0) {
		res.data.forEach(item => {
			item.parid = row.id;
			if (item.hasChild == "1") {
				item.hasChildren = true;
			} else {
				item.hasChildren = false;
			}
		});
		if (res.code == 200) {
			await setTimeout(() => {
				resolve(res.data);
			}, 100);
		}
	} else {
		resolve([]);
	}
};
//删除
const handleDelete = row => {
	ElMessageBox.confirm(`确定要删除"${row.vztmc}"吗?`, "温馨提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
		draggable: true
	}).then(async () => {
		const res = await deleteTopicsApi({ vztbm: row.vztbm });
		if (res.code == 200) {
			ElMessage.success(res.msg);
			getList();
			
			//解决bug
			const { parid } = row; //取出当前删除行的pid
			const { tree, treeNode, resolve } = maps.value[parid]; //根据pid取出对应的节点数据,没用也生效了
			//let { lazyTreeNodeMap, treeData } = tableRef.value.store.states;//没用也生效了
			
			//其实主要就这2行代码生效了!!!
			let { lazyTreeNodeMap} = tableRef.value.store.states;
			lazyTreeNodeMap.value[parid] = [];
		}
	});
};