使用el-table做成树形结构并解决数据驱动视图问题

<el-table
		ref="tableRef"
		lazy
		border
		highlight-current-row
		height="300"
		row-key="listId"
		style="width: 100%; margin-bottom: 10px"
		:load="load"
		:data="list"
		:default-expand-all="isExpandAll"
		:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>

maps: new Map(),

load(tree, treeNode, resolve) {
	this.maps.set(tree.listId, { tree, treeNode, resolve });
	getUdmBppjDataList({ listId: tree.listId }).then((res) => {
		const childList = res.rows;
		// 必要设置，不然没有下级图标
		childList.forEach((item) => {
			(item.hasChildren = true), (item.children = null);
		});
		setTimeout(() => {
			resolve(childList);
		}, 200);
	});
},

refresh(parentId) {
	// 根据父级id取出对应节点数据
	const { row, treeNode, resolve } = this.maps.get(parentId);
	// 通过接口获取想要刷新的 父节点里面所有子节点数据的数组
	getUdmBppjDataList({ listId: parentId }).then((res) => {
		res.rows.forEach((item) => {
			// 必要设置，不然没有下级图标
			item.hasChildren = true;
			item.children = null;
		});
		// 这个是刷新的方法 最后一个参数是最新的子节点数据的数组--相当于吧新数组替换旧数组
		this.$set(this.$refs.tableRef.store.states.lazyTreeNodeMap, parentId, res.rows);
	});
 
	if (row) {
		this.load(row, treeNode, resolve);
	}
},

if (this.titleDialog === '增加同级部件信息') {
	postUdmBppjDataList(obj).then((res) => {
		this.$message({
			message: '增加同级部件信息成功！',
			type: 'success',
			duration: 1000,
		});
		this.getList();
		// 当table 里面没有数据时候不调用 refresh 和 当点击第一层时候也不调用
		if (this.list.length > 0 && this.list[0].parentListId !== this.rowData.parentListId) {
			this.refresh(this.rowData.parentListId);
		}
	});
}