使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問題
el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問題
我們?cè)谕瓿梢粋€(gè)樹形表格后，需要對(duì)數(shù)據(jù)進(jìn)行增刪改查動(dòng)作，同時(shí)讓我們保存數(shù)據(jù)渲染到表格上。
這時(shí)我們就會(huì)發(fā)現(xiàn)一個(gè)大大滴問題！?。?/p>
我們?cè)趯?duì)第一層樹狀結(jié)構(gòu)表格進(jìn)行增刪改后，再調(diào)取刷新列表方法是正常渲染的。但是我們給第一層增加子級(jí)時(shí)候，或者刪除第二層內(nèi)數(shù)據(jù)，亦或者修改第二層以內(nèi)數(shù)據(jù)就會(huì)發(fā)現(xiàn)，調(diào)取的刷新列表方法是沒有效果，我們?cè)偈謩?dòng)刷新頁(yè)面后數(shù)據(jù)才會(huì)渲染上去？??！
這個(gè)問題讓我心里一咯噔，不會(huì)吧不會(huì)吧！?。∮肿屛遗錾线@該s的難題o(╥﹏╥)o
我在網(wǎng)友博客上找到一種方法：lazyTreeNodeMap 是 el-table 組件中的一個(gè)屬性，用于存儲(chǔ)懶加載樹節(jié)點(diǎn)的映射關(guān)系。
話不多說，開整！
整體架構(gòu)流程
第一步：首先我們先把el-table的樹形結(jié)構(gòu)搭出來，如果還沒有做好樹形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來存儲(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è)置，不然沒有下級(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);
// 通過接口獲取想要刷新的 父節(jié)點(diǎn)里面所有子節(jié)點(diǎn)數(shù)據(jù)的數(shù)組
getUdmBppjDataList({ listId: parentId }).then((res) => {
res.rows.forEach((item) => {
// 必要設(shè)置，不然沒有下級(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)用上面的我們寫的刷新的方法。
tip:一定要注意執(zhí)行順序，負(fù)責(zé)會(huì)出現(xiàn)線程問題，有時(shí)候能增加成功有時(shí)候又不行?。。?/strong>
if (this.titleDialog === '增加同級(jí)部件信息') {
postUdmBppjDataList(obj).then((res) => {
this.$message({
message: '增加同級(jí)部件信息成功！',
type: 'success',
duration: 1000,
});
this.getList();
// 當(dāng)table 里面沒有數(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);
}
});
} 第六步：去嘗試我們寫的方法吧！
技術(shù)名詞解釋
load(tree, treeNode, resolve)：
tree：表示當(dāng)前的樹形數(shù)據(jù)結(jié)構(gòu)，通常是整棵樹的數(shù)據(jù)。在調(diào)用load方法時(shí)，會(huì)傳入當(dāng)前的樹形數(shù)據(jù)結(jié)構(gòu)，您可以通過該參數(shù)獲取整棵樹的數(shù)據(jù)。treeNode：表示當(dāng)前需要加載子節(jié)點(diǎn)數(shù)據(jù)的樹節(jié)點(diǎn)對(duì)象。在調(diào)用load方法時(shí)，會(huì)傳入需要加載子節(jié)點(diǎn)數(shù)據(jù)的樹節(jié)點(diǎn)對(duì)象，您可以通過該參數(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuepress項(xiàng)目側(cè)邊欄菜單配置使用方式
這篇文章主要介紹了vuepress項(xiàng)目側(cè)邊欄菜單配置使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
watch 函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
在頁(yè)面進(jìn)行pdf預(yù)覽的時(shí)候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進(jìn)行pdf預(yù)覽,需要的朋友可以參考下2021-12-12
解決v-for中使用v-if或者v-bind:class失效的問題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
關(guān)于怎么在vue項(xiàng)目里寫react詳情
本篇文章是在vue項(xiàng)目里寫tsx的一篇介紹。其實(shí)vue里面寫jsx也挺有意思的，接下來小編九給大家詳細(xì)介紹吧，感興趣的小伙伴請(qǐng)參考下面的文章內(nèi)容2021-09-09
這篇文章主要介紹了解決vue-cli輸入命令vue ui沒效果的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue electron前端開啟局域網(wǎng)接口實(shí)現(xiàn)流程詳細(xì)介紹
用electron寫了一個(gè)自己用的小軟件，無后端，純本地的數(shù)據(jù)。最近想著開發(fā)一個(gè)手機(jī)端app，將PC端的數(shù)據(jù)進(jìn)行同步。為了這小小的功能單獨(dú)寫個(gè)后端又麻煩。干脆前后端不分離哈哈，直接在前端軟件中開啟接口2022-10-10
Vue計(jì)算屬性與監(jiān)視屬性詳細(xì)分析使用
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-11-11
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11