el-tree樹元件的懶載入寫法步驟_水冗水孚

theme: channing-cyan highlight: a11y-light

樹結構在專案中其實還是比較常見的，本篇文章以餓了麼UI中的el-tree元件為例，講述一下樹元件的懶載入的實現步驟。當然，順帶吐槽一下官方文件的案例寫的不太接地氣

問題描述

樹元件如果資料比較多的話，一次性把整棵樹的資料都請求到，略有耗時。所以為了優化效能，我們就要實現樹元件懶載入的效果，也就是當我們點選樹節點的時候，再去向後端發請求，獲取對應點選的樹節點下的資料。這樣的話，點選哪裡，載入哪裡，效能會提高不少。

效果圖

我們先看一下最終的成品效果圖

懶載入前端程式碼

html部分

```js ```

js部分

```js

```

思路分析

首先，使用el-tree樹元件必須指定lazy和load屬性

lazy告知樹元件開啟懶載入模式，加上即可
load繫結的是一個函式，這個函式主要是用來在頁面初始化載入的時候，用於向後端發請求獲取el-tree的樹結構的資料的。頁面初始化載入，load繫結的函式會自動執行

注意，如果樹元件開啟了懶載入模式，就不用在el-tree元件標籤中寫:data="data屬性了，因為load繫結的函式，有兩個引數，node和resolve，node是樹節點，而resolve又是一個函式，相當於高階函式（函式柯里化）了，我們只需要把後端返回的資料（單層陣列結構），放在這個函式裡面，這個函式會自動把資料傳遞到樹元件裡面去，同時渲染檢視

然後，我們需要和後端約定好傳遞的資料結構，即props中的配置

本例中是一個便於理解的簡單el-tree的demo，所以就按照最簡單的配置書寫

data中的props中的label屬性，就是平常指定的節點的名字，這個不贅述
data中的props中的isLeaf屬性，指定的則是：是否是樹元件中的葉子節點。什麼是葉子節點？我們知道一棵樹有很多分支（樹枝），而樹枝的末梢則是葉子，所以葉子節點就是樹節點的最內層，最裡層。所以，我們需要和後端溝通，讓後端返回的樹結構資料中，最內層資料加上isLeaf屬性布林值，為true就代表是最內層，為false，或者不加這個屬性，就代表不是最內層。對應樹元件的頁面效果就是：為true的樹元件，最內層不會有三角箭頭。即到底了，沒懶載入了

注意，因為樹元件的懶載入是，點選樹元件節點，載入下一層的資料，所以要和後端同事溝通，讓後端介面資料不要一次性的返回整個樹結構的資料，而是分層返回，點選那個樹節點，樹節點資料中會有id的，根據id發請求到後端，後端再把對應資料返回給前端，是陣列結構的資料

接下來說說發請求這一塊

因為樹元件的load屬性繫結的函式，初始化就會載入發請求，又因為樹元件可以分為最外層和非最外層，所以在load繫結的函式中，本例是loadNode函式裡面發請求，可以分兩類：最外層和非最外層。（最外層level為0，非最外層levle大於0）所以就會有如下程式碼：

js loadNode(node, resolve) { console.log('node節點資料記錄了很多資訊',node); console.log('resolve高階函式給樹元件賦值',node); //如果展開第一級節點，從後臺載入一級節點列表（固定的） if (node.level == 0) { this.loadfirstnode(resolve); } //如果展開其他級節點，動態從後臺載入下一級節點列表（可變的） if (node.level >= 1) { this.loadchildnode(node, resolve); } }, 我們列印node引數和resolve引數，發現分別是樹節點和一個函式，樹節點記錄了很多資訊，其中就有樹的層級