當(dāng)面對大量數(shù)據(jù)時，一次性加載所有數(shù)據(jù)可能會導(dǎo)致性能問題。為了解決這一問題，我們可以實現(xiàn)樹形數(shù)據(jù)的懶加載。本文將介紹如何在使用 Element UI 的 Vue 應(yīng)用中為 el-table 組件的樹形數(shù)據(jù)添加懶加載功能。
懶加載的基本概念
懶加載是一種優(yōu)化網(wǎng)頁或應(yīng)用的加載時間的技術(shù)，它通過延遲加載頁面上的某些部分的內(nèi)容，直到這些內(nèi)容實際需要顯示時才加載。在樹形數(shù)據(jù)的場景中，懶加載意味著只有當(dāng)用戶展開一個節(jié)點時，我們才加載這個節(jié)點的子節(jié)點數(shù)據(jù)。
實現(xiàn)步驟
第一步：創(chuàng)建基礎(chǔ)的 el-table
第二步：添加展開事件處理器
為了實現(xiàn)懶加載，我們需要監(jiān)聽用戶對節(jié)點的展開操作。這可以通過在 el-table 組件上使用 tree-props 屬性來實現(xiàn)，該屬性允許我們指定節(jié)點的展開事件處理器：
<el-table
:data="tableData"
style="width: 100%"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@expand-change="handleExpand"
>第三步：實現(xiàn)懶加載邏輯
當(dāng)用戶展開一個節(jié)點時，我們需要加載這個節(jié)點的子節(jié)點。這通常涉及到發(fā)送一個異步請求到服務(wù)器，根據(jù)當(dāng)前節(jié)點的 ID 獲取其子節(jié)點數(shù)據(jù)，然后更新數(shù)據(jù)模型。
methods: {
async handleExpand(row, expandedRows) {
if (expandedRows.includes(row)) {
// 節(jié)點已展開，執(zhí)行懶加載邏輯
if (row.children.length === 0 && row.hasChildren) {
// 假設(shè)我們有一個函數(shù) fetchChildren 來異步獲取子節(jié)點數(shù)據(jù)
const children = await this.fetchChildren(row.id);
this.$set(row, 'children', children);
}
}
},
fetchChildren(parentId) {
// 發(fā)送請求到服務(wù)器，獲取 parentId 下的子節(jié)點數(shù)據(jù)
return new Promise((resolve) => {
setTimeout(() => {
// 模擬異步獲取數(shù)據(jù)
const result = [
{ id: `${parentId}-1`, name: `子節(jié)點 ${parentId}-1`, children: [], hasChildren: true },
{ id: `${parentId}-2`, name: `子節(jié)點 ${parentId}-2`, children: [], hasChildren: false },
];
resolve(result);
}, 1000);
});
},
},
注意事項
- 在實際的應(yīng)用中，
fetchChildren方法應(yīng)該發(fā)送實際的 HTTP 請求到后端服務(wù)獲取數(shù)據(jù)。 - 通過為節(jié)點設(shè)置
hasChildren屬性，我們可以控制哪些節(jié)點是可展開的（即使它們當(dāng)前沒有子節(jié)點）。這對于懶加載場景非常重要。 - 使用
this.$set來更新節(jié)點的子節(jié)點列表可以確保 Vue 能夠檢測到數(shù)據(jù)的變化并更新 DOM。
