最近接到一個(gè)需求默辨，要求展示機(jī)構(gòu)信息，機(jī)構(gòu)分為若干層苍息，有從屬關(guān)系缩幸，且要展示字段較多，所以第一時(shí)間想到了ElementUI中Table組件的樹形展示竞思，效果如下圖表谊。
相關(guān)代碼
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
lazy // 使用lazy屬性，開啟了懶加載
:load="load"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="name"
label="機(jī)構(gòu)名稱"
sortable
width="180">
</el-table-column>
<el-table-column
prop="certification"
label="當(dāng)前認(rèn)證情況"
sortable
width="180">
</el-table-column>
<el-table-column
prop="user"
label="最后操作人">
</el-table-column>
<el-table-column
prop="operate"
label="操作">
<template slot-scope="scope">
<el-button type="text">申請認(rèn)證</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
this.init();
},
methods: {
init() {
this.tableData = [{
id: 1,
certification: '未認(rèn)證',
name: '一級機(jī)構(gòu)',
user: '',
children: [
{
id: 21,
certification: '未認(rèn)證',
name: '二級機(jī)構(gòu)1',
user: '',
hasChildren: true
},
{
id: 22,
certification: '未認(rèn)證',
name: '二級機(jī)構(gòu)2',
user: '',
hasChildren: false,
},
]
}];
},
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
certification: '未認(rèn)證',
name: '三級機(jī)構(gòu)1',
user: '',
}, {
id: 32,
certification: '未認(rèn)證',
name: '三級機(jī)構(gòu)2',
user: '',
}
])
}, 1000)
}
},
}
</script>
執(zhí)行說明
-
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
這個(gè)屬性的意思是衙四，tableData數(shù)組的每一項(xiàng)表示樹的一個(gè)節(jié)點(diǎn)铃肯，如果該節(jié)點(diǎn)有子節(jié)點(diǎn)，則子節(jié)點(diǎn)數(shù)據(jù)存在children數(shù)組中传蹈，hasChildren字段存布爾值押逼，表示該節(jié)點(diǎn)有沒有子節(jié)點(diǎn)。 - lazy屬性惦界，開啟了懶加載挑格，當(dāng)點(diǎn)開某個(gè)子節(jié)點(diǎn)時(shí)，才會(huì)觸發(fā)load方法去調(diào)接口查子節(jié)點(diǎn)數(shù)據(jù)沾歪。
進(jìn)入頁面時(shí)調(diào)用init方法漂彤，會(huì)拿到一級根節(jié)點(diǎn)和二級子節(jié)點(diǎn)的數(shù)據(jù)，當(dāng)點(diǎn)開某個(gè)二級子節(jié)點(diǎn)時(shí)灾搏，會(huì)調(diào)用load方法挫望，去拿對應(yīng)的三級子節(jié)點(diǎn)。當(dāng)某個(gè)二級子節(jié)點(diǎn)已經(jīng)展開過狂窑，將它收起重新展開媳板，不會(huì)重新觸發(fā)load方法，確確實(shí)實(shí)的懶加載泉哈。
而且三級子節(jié)點(diǎn)的數(shù)據(jù)（對應(yīng)二級子節(jié)點(diǎn)的children數(shù)組）在el-table內(nèi)部維護(hù)蛉幸，開發(fā)者能拿到的tableData值實(shí)際并未發(fā)生更改破讨。
遇到的問題
如圖可以看到，每一個(gè)節(jié)點(diǎn)都對應(yīng)了一個(gè)申請認(rèn)證的操作按鈕奕纫，當(dāng)申請認(rèn)證后提陶，需要更新下該節(jié)點(diǎn)數(shù)據(jù)的狀態(tài)。
這時(shí)發(fā)現(xiàn)匹层，如果是一級二級的節(jié)點(diǎn)狀態(tài)發(fā)生變化隙笆，可以通過重新調(diào)用init方法更新，但是三級節(jié)點(diǎn)的數(shù)據(jù)升筏，并不在tableData中維護(hù)仲器，無法更新。
解決方案
- 給el-table加上v-if='showTable'仰冠，默認(rèn)為true，當(dāng)更新了某個(gè)節(jié)點(diǎn)狀態(tài)后蝶糯，重新調(diào)用init方法洋只，列表接口調(diào)完后，現(xiàn)將showTable設(shè)置為false昼捍，然后再showTable設(shè)置為true识虚。這樣，列表整體都會(huì)重新加載妒茬，且所有的二級節(jié)點(diǎn)都收起來了担锤，點(diǎn)開二級節(jié)點(diǎn)，則會(huì)重新觸發(fā)load方法乍钻，去查詢最新數(shù)據(jù)肛循，這樣狀態(tài)就是正確的了。
changeStatus() {
change().then(res => {
this.init();
});
},
init() {
this.showTable = false;
this.$nextTick(() => {
this.showTable = true;
this.tableData = [{
id: 1,
certification: '未認(rèn)證',
name: '一級機(jī)構(gòu)',
user: '',
children: [
{
id: 21,
certification: '未認(rèn)證',
name: '二級機(jī)構(gòu)1',
user: '',
hasChildren: true
},
{
id: 22,
certification: '未認(rèn)證',
name: '二級機(jī)構(gòu)2',
user: '',
hasChildren: false,
},
]
}];
});
},
這種方法的問題是银择，之前展開的節(jié)點(diǎn)會(huì)收起到初始狀態(tài)多糠，看測試/客戶能否接受了。
- 將每個(gè)節(jié)點(diǎn)load回調(diào)中的treeNode浩考、resolve方法存起來夹孔，當(dāng)需要更新的時(shí)候，主動(dòng)調(diào)用load方法即可析孽。
let treeMap = new Map();
// methods中
changeStatus(id) {
change({
id
}).then(res => {
let treeObj = treeMap.get(id);
this.load({id: id}, treeObj.treeNode, treeObj.resolve);
});
},
load(tree, treeNode, resolve) {
if (!treeMap.has(tree.id)) {
treeMap.set(tree.id, {
treeNode,
resolve
})
}
setTimeout(() => {
resolve([
{
id: 31,
certification: '未認(rèn)證',
name: '三級機(jī)構(gòu)1',
user: '',
}, {
id: 32,
certification: '未認(rèn)證',
name: '三級機(jī)構(gòu)2',
user: '',
}
])
}, 1000);
},
定義了一個(gè)treeMap來存每個(gè)三級節(jié)點(diǎn)對應(yīng)的treeNode和resolve搭伤，這兩個(gè)是load回調(diào)中的必傳參數(shù)。當(dāng)更新某一個(gè)節(jié)點(diǎn)數(shù)據(jù)時(shí)袜瞬，找到對應(yīng)節(jié)點(diǎn)的這倆參數(shù)怜俐，然后主動(dòng)調(diào)用下load方法即可。
上面的是偽代碼吞滞，還有一些其他處理邏輯佑菩，比如：
- 三級節(jié)點(diǎn)沒有下級盾沫，不會(huì)有l(wèi)oad，更新狀態(tài)后殿漠，應(yīng)該load的是該三級節(jié)點(diǎn)對應(yīng)的二級節(jié)點(diǎn)赴精。
- 一二級節(jié)點(diǎn)更新后直接this.init即可
- 如果需要更新整個(gè)樹，要記得清空treeMap绞幌，避免引入其他問題蕾哟。
- ......
這種方案的好處是，最小化范圍更新莲蜘，哪里變了更新哪里谭确。而且之前展開收起的節(jié)點(diǎn)，保持原狀票渠，不會(huì)被強(qiáng)制收起來逐哈，更符合正常的操作認(rèn)知。
希望本文能夠幫助到需要的朋友Ｎ是辍昂秃！
