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

概要

        我们在完成一个树形表格后，需要对数据进行增删改查动作，同时让我们保存数据渲染到表格上。

        这时我们就会发现一个大大滴问题！！！

        我们在对第一层树状结构表格进行增删改后，再调取刷新列表方法是正常渲染的。但是我们给第一层增加子级时候，或者删除第二层内数据，亦或者修改第二层以内数据就会发现，调取的刷新列表方法是没有效果，我们再手动刷新页面后数据才会渲染上去？！！

        这个问题让我心里一咯噔，不会吧不会吧！！！又让我碰上这该s的难题o(╥﹏╥)o

        我在网友博客上找到一种方法：lazyTreeNodeMap 是 el-table 组件中的一个属性，用于存储懒加载树节点的映射关系。话不多说，开整！

整体架构流程

第一步：首先我们先把el-table的树形结构搭出来，如果还没有做好树形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' }"
>

  第二步：我们在data里面声明一个map来存储我们load回调数据

maps: new Map(),

  第三步：加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息。
        这里获取子节点数据，同时把加载子节点数据存进maps

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);
	});
},

第四步：这个是刷新的方法 ，主要是刷新子级列表数据的方法，我们在增加、修改、删除子级时候调用这个方法。如果为你对最外层进行增删改查不需要调用该方法。

整编文章精髓主要在这段代码上： this.$refs.tableRef.store.states.lazyTreeNodeMap

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);
	}
},

第五步：这是我调用上面的我们写的刷新的方法。

tip:一定要注意执行顺序，负责会出现线程问题，有时候能增加成功有时候又不行！！！

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);
		}
	});
} 

第六步：去尝试我们写的方法吧！

技术名词解释

load(tree, treeNode, resolve)：

• tree：表示当前的树形数据结构，通常是整棵树的数据。在调用 load 方法时，会传入当前的树形数据结构，您可以通过该参数获取整棵树的数据。

• treeNode：表示当前需要加载子节点数据的树节点对象。在调用 load 方法时，会传入需要加载子节点数据的树节点对象，您可以通过该参数获取该节点的相关信息，如节点数据、父节点等。

• resolve：是一个回调函数，用于在获取子节点数据后进行回调处理。您需要在 load 方法中获取子节点数据，并在获取数据后调用 resolve 函数并传入子节点数据，以告知 el-table 组件加载成功并渲染子节点数据。

小结

        这里的难点就是不知道有 lazyTreeNodeMap 这个属性，和使用他的方法！
        我能解决这个问题也是借鉴其他大佬的文章，希望我的文章也能为你解决问题！！！