當(dāng)面對(duì)大量數(shù)據(jù)時(shí)，一次性加載所有數(shù)據(jù)可能會(huì)導(dǎo)致性能問題。為了解決這一問題，我們可以實(shí)現(xiàn)樹形數(shù)據(jù)的懶加載。本文將介紹如何在使用 Element UI 的 Vue 應(yīng)用中為 el-table 組件的樹形數(shù)據(jù)添加懶加載功能。

懶加載的基本概念

懶加載是一種優(yōu)化網(wǎng)頁或應(yīng)用的加載時(shí)間的技術(shù)，它通過延遲加載頁面上的某些部分的內(nèi)容，直到這些內(nèi)容實(shí)際需要顯示時(shí)才加載。在樹形數(shù)據(jù)的場景中，懶加載意味著只有當(dāng)用戶展開一個(gè)節(jié)點(diǎn)時(shí)，我們才加載這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)據(jù)。

實(shí)現(xiàn)步驟

第一步：創(chuàng)建基礎(chǔ)的 el-table

第二步：添加展開事件處理器

為了實(shí)現(xiàn)懶加載，我們需要監(jiān)聽用戶對(duì)節(jié)點(diǎn)的展開操作。這可以通過在 el-table 組件上使用 tree-props 屬性來實(shí)現(xiàn)，該屬性允許我們指定節(jié)點(diǎn)的展開事件處理器：

<el-table
  :data="tableData"
  style="width: 100%"
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  @expand-change="handleExpand"
>

第三步：實(shí)現(xiàn)懶加載邏輯

當(dāng)用戶展開一個(gè)節(jié)點(diǎn)時(shí)，我們需要加載這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)。這通常涉及到發(fā)送一個(gè)異步請(qǐng)求到服務(wù)器，根據(jù)當(dāng)前節(jié)點(diǎn)的 ID 獲取其子節(jié)點(diǎn)數(shù)據(jù)，然后更新數(shù)據(jù)模型。

methods: {
  async handleExpand(row, expandedRows) {
    if (expandedRows.includes(row)) {
      // 節(jié)點(diǎn)已展開，執(zhí)行懶加載邏輯
      if (row.children.length === 0 && row.hasChildren) {
        // 假設(shè)我們有一個(gè)函數(shù) fetchChildren 來異步獲取子節(jié)點(diǎn)數(shù)據(jù)
        const children = await this.fetchChildren(row.id);
        this.$set(row, 'children', children);
      }
    }
  },
  fetchChildren(parentId) {
    // 發(fā)送請(qǐng)求到服務(wù)器，獲取 parentId 下的子節(jié)點(diǎn)數(shù)據(jù)
    return new Promise((resolve) => {
      setTimeout(() => {
        // 模擬異步獲取數(shù)據(jù)
        const result = [
          { id: `${parentId}-1`, name: `子節(jié)點(diǎn) ${parentId}-1`, children: [], hasChildren: true },
          { id: `${parentId}-2`, name: `子節(jié)點(diǎn) ${parentId}-2`, children: [], hasChildren: false },
        ];
        resolve(result);
      }, 1000);
    });
  },
},

注意事項(xiàng)

• 在實(shí)際的應(yīng)用中，fetchChildren 方法應(yīng)該發(fā)送實(shí)際的 HTTP 請(qǐng)求到后端服務(wù)獲取數(shù)據(jù)。
• 通過為節(jié)點(diǎn)設(shè)置 hasChildren 屬性，我們可以控制哪些節(jié)點(diǎn)是可展開的（即使它們當(dāng)前沒有子節(jié)點(diǎn)）。這對(duì)于懶加載場景非常重要。
• 使用 this.$set 來更新節(jié)點(diǎn)的子節(jié)點(diǎn)列表可以確保 Vue 能夠檢測到數(shù)據(jù)的變化并更新 DOM。