el-tree樹元件的懶載入寫法步驟

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-light


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

問題描述

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

效果圖

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

1.gif

懶載入前端程式碼

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引數,發現分別是樹節點和一個函式,樹節點記錄了很多資訊,其中就有樹的層級

node引數列印效果圖

2.png

resolve引數列印效果圖

3.png

最後注意後端返回的資料結構

初始化載入最外層西遊記和三國演義節點 5.png

點選西遊記載入孫悟空、豬八戒、沙和尚節點

7.png

完整程式碼地址

附上Gitee完整程式碼,方便大家理解,裡面分為簡化版的el-tree和優化版的el-tree

https://gitee.com/ah-shuai/demo-of-el-tree