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)更新型檀。具體需求如下圖所示：
當(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)鍵代碼如下圖所示：
首先嫉称，通過(guò)樹形控件的父節(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ù)值保存晾腔。如下圖所示：
loadNode1內(nèi)部是通過(guò)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)的情況下通過(guò)調(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)效率問(wèn)題席怪，也提升了用戶體驗(yàn)。
