小編給大家分享一下ElementUI Tree樹形控件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站服務(wù)項目包括臺江網(wǎng)站建設(shè)、臺江網(wǎng)站制作、臺江網(wǎng)頁制作以及臺江網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，臺江網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到臺江省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一，數(shù)據(jù)渲染

1）在標(biāo)簽中綁定data屬性

2）在vue實例的data中聲明list變量

3）從后臺獲取到的數(shù)據(jù)是以數(shù)組里面嵌套多個對象的結(jié)構(gòu)并賦值給list，

當(dāng)前的數(shù)據(jù)是OrgName為當(dāng)前結(jié)構(gòu)名稱，

Children作為子分支數(shù)組，

子分支中的結(jié)構(gòu)與當(dāng)前結(jié)構(gòu)一致

4）在頁面中展示結(jié)構(gòu)的方法是在標(biāo)簽中綁定porps屬性，

并在vue實例的data中用label屬性定義顯示的名稱，

用childern屬性綁定展示的子分支數(shù)據(jù)

5）最后展示的結(jié)構(gòu)如下

二，點擊當(dāng)前分支獲取當(dāng)前分支與上級分支的值

1）此處使用的是@node-click事件并綁定一個函數(shù)，

函數(shù)在vue實例的methods中定義，并可以接收兩個參數(shù)node與data

2）node是一個對象，

就是點擊當(dāng)前分支獲得的數(shù)據(jù)，

如果只需要當(dāng)前層級的數(shù)據(jù)的話就可以使用node，

后臺有一并返給我上級的ID，

但是頁面中點擊分支后還需要顯示上級的名稱，

所以此處使用node就不太夠

3）data同樣也是一個對象，

他的data屬性包含的就是當(dāng)前分支的值，

其中的parent屬性就包含了他上級的值，

甚至里面的parent屬性還包含更上一級的值一直到最外層，

可以根據(jù)自己當(dāng)前項目的需要來選擇使用data還是node來取到自己需要的值

三，el-tree 樹形控件給節(jié)點添加圖標(biāo)

以上是“ElementUI Tree樹形控件怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！