Element提供的Tree樹形控件，可以用清晰的層級(jí)結(jié)構(gòu)展示信息，還可以展開或折疊。Tree支持兩種加載模式：一次性加載全部樹節(jié)點(diǎn)和懶加載模式。所謂懶加載模式，是指當(dāng)需要展開父節(jié)點(diǎn)時(shí)才渲染子節(jié)點(diǎn)。懶加載模式的應(yīng)用場(chǎng)景適合樹節(jié)點(diǎn)數(shù)據(jù)量大的情形，在一定程度上可以優(yōu)化圖形用戶界面的響應(yīng)效率以及提升用戶體驗(yàn)。但是，懶加載模式對(duì)數(shù)據(jù)動(dòng)態(tài)刷新應(yīng)用需求的支持不盡如意。樹形控件節(jié)點(diǎn)一旦展開就緩存在本地，后續(xù)不會(huì)再繼續(xù)更新和刷新節(jié)點(diǎn)數(shù)據(jù)。本文將介紹如何實(shí)現(xiàn)Element樹形控件Tree在懶加載模式下的動(dòng)態(tài)更新。具體需求如下圖所示：

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的保定網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

動(dòng)態(tài)更新需求

當(dāng)Select選擇器選擇箱變、逆變器、匯流箱或組串等類型時(shí)，Tree樹形控件會(huì)動(dòng)態(tài)刷新顯示相應(yīng)類型的設(shè)備名稱。我們知道在懶加載模式下，Tree樹形控件節(jié)點(diǎn)一旦展開，就不再重新加載節(jié)點(diǎn)數(shù)據(jù)。那么如何實(shí)現(xiàn)在選擇不同類型時(shí)動(dòng)態(tài)刷新樹形控件節(jié)點(diǎn)數(shù)據(jù)顯示呢？一種實(shí)現(xiàn)思路是在Select選擇器發(fā)生變化時(shí)，在change事件中清空Tree樹形控件的全部子節(jié)點(diǎn)，然后再重新加載樹形控件節(jié)點(diǎn)數(shù)據(jù)。關(guān)鍵代碼如下圖所示：

清空樹形控件節(jié)點(diǎn)

首先，通過樹形控件的父節(jié)點(diǎn)清空所有子節(jié)點(diǎn)數(shù)據(jù)，然后調(diào)用loadNode1方法重新構(gòu)建樹形控件懶加載數(shù)據(jù)。loadNode1是樹形控件load屬性指定的加載樹的方法，該方法在加載樹或者展開某個(gè)節(jié)點(diǎn)時(shí)會(huì)被自動(dòng)調(diào)用。

我們可以看到，傳遞給loadNode1方法有兩個(gè)參數(shù)，this.node和this.resolve，這兩個(gè)參數(shù)都是樹形控件頂層節(jié)點(diǎn)屬性數(shù)值。那么，是如何獲取到這兩個(gè)參數(shù)數(shù)值的呢？具體方法是：首先，申明node和reslove兩個(gè)變量用于保存頂層節(jié)點(diǎn)的node和reslove數(shù)值。然后，在樹形控件加載時(shí)將node.level===0情況下的node和reslove數(shù)值保存。如下圖所示：

獲取頂層節(jié)點(diǎn)

loadNode1內(nèi)部是通過reslove方法，將數(shù)據(jù)逐級(jí)推至樹形控件數(shù)據(jù)結(jié)構(gòu)中的。先執(zhí)行reslove方法的數(shù)據(jù)是父節(jié)點(diǎn)，后執(zhí)行reslove方法的數(shù)據(jù)是子節(jié)點(diǎn)，在無(wú)子節(jié)點(diǎn)的情況下通過調(diào)用reslove([])實(shí)現(xiàn)。

結(jié)束語(yǔ)：至此，實(shí)現(xiàn)了Element的Tree樹形控件懶加載模式下的節(jié)點(diǎn)數(shù)據(jù)動(dòng)態(tài)更新。在子節(jié)點(diǎn)數(shù)據(jù)量大的情況下，懶加載和動(dòng)態(tài)更新機(jī)制，在一定程度上解決了響應(yīng)效率問題，也提升了用戶體驗(yàn)。

補(bǔ)充:element ui 懶加載樹節(jié)點(diǎn)內(nèi)子項(xiàng)的動(dòng)態(tài)更新

上面代碼是element ui官方樹懶加載的實(shí)例。實(shí)現(xiàn)就是添加lazy，綁定一個(gè)load屬性，點(diǎn)擊節(jié)點(diǎn)的時(shí)候，就會(huì)觸發(fā)loadNode1的方法，將數(shù)據(jù)刷到點(diǎn)擊的節(jié)點(diǎn)里面。

這里的問題是：如果該節(jié)點(diǎn)load過數(shù)據(jù)，再次點(diǎn)擊是不會(huì)觸發(fā)loadNode1這個(gè)方法的，但是這個(gè)節(jié)點(diǎn)下的子節(jié)點(diǎn)也許會(huì)動(dòng)態(tài)增加或者刪除

解決的思路是：

1、得到選中的節(jié)點(diǎn)

2、將選中節(jié)點(diǎn)的子節(jié)點(diǎn)全部刪除

3、將選中節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)據(jù)手動(dòng)刷到該節(jié)點(diǎn)內(nèi)

我查過element ui源碼，這里用到源碼內(nèi)的方法，所以我們實(shí)現(xiàn)下來很方便，只要三行代碼

function refreshLazyTree(node, children) {
 var theChildren = node.childNodes
 theChildren.splice(0, theChildren.length)
 node.doCreateChildren(children)
}

1、node就是選中的的節(jié)點(diǎn)（也就是點(diǎn)擊展開的節(jié)點(diǎn)），你可以通過element ui里的getNode方法獲得，也可以直接監(jiān)聽@node-click事件直接獲取選中的節(jié)點(diǎn)。

2、children就是node這個(gè)節(jié)點(diǎn)的子項(xiàng)

3、通過splice方法刪除node節(jié)點(diǎn)下的所有子項(xiàng)

4、調(diào)用doCreateChildren創(chuàng)建子項(xiàng)就ok了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。