el-table做成樹(shù)形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問(wèn)題

我們?cè)谕瓿梢粋€(gè)樹(shù)形表格后，需要對(duì)數(shù)據(jù)進(jìn)行增刪改查動(dòng)作，同時(shí)讓我們保存數(shù)據(jù)渲染到表格上。

這時(shí)我們就會(huì)發(fā)現(xiàn)一個(gè)大大滴問(wèn)題！??！

我們?cè)趯?duì)第一層樹(shù)狀結(jié)構(gòu)表格進(jìn)行增刪改后，再調(diào)取刷新列表方法是正常渲染的。但是我們給第一層增加子級(jí)時(shí)候，或者刪除第二層內(nèi)數(shù)據(jù)，亦或者修改第二層以?xún)?nèi)數(shù)據(jù)就會(huì)發(fā)現(xiàn)，調(diào)取的刷新列表方法是沒(méi)有效果，我們?cè)偈謩?dòng)刷新頁(yè)面后數(shù)據(jù)才會(huì)渲染上去？??！ 

這個(gè)問(wèn)題讓我心里一咯噔，不會(huì)吧不會(huì)吧?。?！又讓我碰上這該s的難題o(╥﹏╥)o

我在網(wǎng)友博客上找到一種方法：lazyTreeNodeMap 是 el-table 組件中的一個(gè)屬性，用于存儲(chǔ)懶加載樹(shù)節(jié)點(diǎn)的映射關(guān)系。

話(huà)不多說(shuō)，開(kāi)整！

整體架構(gòu)流程

第一步：首先我們先把el-table的樹(shù)形結(jié)構(gòu)搭出來(lái)，如果還沒(méi)有做好樹(shù)形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' }"
>

第二步：我們?cè)赿ata里面聲明一個(gè)map來(lái)存儲(chǔ)我們load回調(diào)數(shù)據(jù)

maps: new Map(),

第三步：加載子節(jié)點(diǎn)數(shù)據(jù)的函數(shù)，lazy 為 true 時(shí)生效，函數(shù)第二個(gè)參數(shù)包含了節(jié)點(diǎn)的層級(jí)信息。

這里獲取子節(jié)點(diǎn)數(shù)據(jù)，同時(shí)把加載子節(jié)點(diǎn)數(shù)據(jù)存進(jìn)maps

load(tree, treeNode, resolve) {
	this.maps.set(tree.listId, { tree, treeNode, resolve });
	getUdmBppjDataList({ listId: tree.listId }).then((res) => {
		const childList = res.rows;
		// 必要設(shè)置，不然沒(méi)有下級(jí)圖標(biāo)
		childList.forEach((item) => {
			(item.hasChildren = true), (item.children = null);
		});
		setTimeout(() => {
			resolve(childList);
		}, 200);
	});
},

第四步：這個(gè)是刷新的方法 ，主要是刷新子級(jí)列表數(shù)據(jù)的方法，我們?cè)谠黾?、修改、刪除子級(jí)時(shí)候調(diào)用這個(gè)方法。如果為你對(duì)最外層進(jìn)行增刪改查不需要調(diào)用該方法。

整編文章精髓主要在這段代碼上： this.$refs.tableRef.store.states.lazyTreeNodeMap

refresh(parentId) {
	// 根據(jù)父級(jí)id取出對(duì)應(yīng)節(jié)點(diǎn)數(shù)據(jù)
	const { row, treeNode, resolve } = this.maps.get(parentId);
	// 通過(guò)接口獲取想要刷新的 父節(jié)點(diǎn)里面所有子節(jié)點(diǎn)數(shù)據(jù)的數(shù)組
	getUdmBppjDataList({ listId: parentId }).then((res) => {
		res.rows.forEach((item) => {
			// 必要設(shè)置，不然沒(méi)有下級(jí)圖標(biāo)
			item.hasChildren = true;
			item.children = null;
		});
		// 這個(gè)是刷新的方法 最后一個(gè)參數(shù)是最新的子節(jié)點(diǎn)數(shù)據(jù)的數(shù)組--相當(dāng)于吧新數(shù)組替換舊數(shù)組
		this.$set(this.$refs.tableRef.store.states.lazyTreeNodeMap, parentId, res.rows);
	});
 
	if (row) {
		this.load(row, treeNode, resolve);
	}
},

第五步：這是我調(diào)用上面的我們寫(xiě)的刷新的方法。

tip:一定要注意執(zhí)行順序，負(fù)責(zé)會(huì)出現(xiàn)線(xiàn)程問(wèn)題，有時(shí)候能增加成功有時(shí)候又不行！??！

if (this.titleDialog === '增加同級(jí)部件信息') {
	postUdmBppjDataList(obj).then((res) => {
		this.$message({
			message: '增加同級(jí)部件信息成功！',
			type: 'success',
			duration: 1000,
		});
		this.getList();
		// 當(dāng)table 里面沒(méi)有數(shù)據(jù)時(shí)候不調(diào)用 refresh 和 當(dāng)點(diǎn)擊第一層時(shí)候也不調(diào)用
		if (this.list.length > 0 && this.list[0].parentListId !== this.rowData.parentListId) {
			this.refresh(this.rowData.parentListId);
		}
	});
} 

第六步：去嘗試我們寫(xiě)的方法吧！

技術(shù)名詞解釋

load(tree, treeNode, resolve)：

• tree：表示當(dāng)前的樹(shù)形數(shù)據(jù)結(jié)構(gòu)，通常是整棵樹(shù)的數(shù)據(jù)。在調(diào)用 load 方法時(shí)，會(huì)傳入當(dāng)前的樹(shù)形數(shù)據(jù)結(jié)構(gòu)，您可以通過(guò)該參數(shù)獲取整棵樹(shù)的數(shù)據(jù)。
• treeNode：表示當(dāng)前需要加載子節(jié)點(diǎn)數(shù)據(jù)的樹(shù)節(jié)點(diǎn)對(duì)象。在調(diào)用 load 方法時(shí)，會(huì)傳入需要加載子節(jié)點(diǎn)數(shù)據(jù)的樹(shù)節(jié)點(diǎn)對(duì)象，您可以通過(guò)該參數(shù)獲取該節(jié)點(diǎn)的相關(guān)信息，如節(jié)點(diǎn)數(shù)據(jù)、父節(jié)點(diǎn)等。
• resolve：是一個(gè)回調(diào)函數(shù)，用于在獲取子節(jié)點(diǎn)數(shù)據(jù)后進(jìn)行回調(diào)處理。您需要在 load 方法中獲取子節(jié)點(diǎn)數(shù)據(jù)，并在獲取數(shù)據(jù)后調(diào)用 resolve 函數(shù)并傳入子節(jié)點(diǎn)數(shù)據(jù)，以告知 el-table 組件加載成功并渲染子節(jié)點(diǎn)數(shù)據(jù)。

總結(jié)

這里的難點(diǎn)就是不知道有 lazyTreeNodeMap 這個(gè)屬性，和使用他的方法！

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論