在樹形組件中,我們渲染到頁面上通常來表示一個組織架構(gòu)的流程,但一般在做的時候會設(shè)置打開和關(guān)閉為兩個不同的字體圖標(biāo)并且在點(diǎn)擊的時候可以切換
如下效果圖:
?文章來源地址http://www.zghlxwxcb.cn/news/detail-417724.html
打開之前是小加號圖標(biāo),打開之后是小減號圖標(biāo)
具體方法:
使用element-ui組件設(shè)置樣式:
icon-class ="圖標(biāo)類名"可以設(shè)置圖標(biāo)樣式
但我們要實(shí)現(xiàn)動態(tài)切換不能直接設(shè)置,需要使用#default方法
注意#default里不僅可以設(shè)置data屬性來傳遞數(shù)據(jù)渲染視圖,也可以通過設(shè)置node來查看樹節(jié)點(diǎn)的響應(yīng)狀態(tài)
?文章來源：http://www.zghlxwxcb.cn/news/detail-417724.html
圖標(biāo)的狀態(tài)可以在vue組件里面查看?
我們在點(diǎn)擊小圖標(biāo)之前,屬性expanded的值為false
?
點(diǎn)擊小圖標(biāo)展開之后expanded的值為true
?設(shè)置icon-class=""用于動態(tài)切換icon圖標(biāo)
<i v-if="data.children.length===0" class="el-icon-circle-plus-outline" />
監(jiān)聽children有沒有值,如果沒有值,則表示當(dāng)前分支為最底層分支,圖標(biāo)顯示小減號(el-icon-remove-outline)
?<i v-else :class="node.expanded?'el-icon-remove-outline':'el-icon-circle-plus-outline'" />
如果children數(shù)組里面有值,則表示其下有分支,點(diǎn)擊之前為小加號(el-icon-circle-plus-outline),點(diǎn)擊之后為小減號(el-icon-circle-plus-outline)
?
?
?
到了這里，關(guān)于小白都會的前端技能---修改element-ui里面的tree組件的icon圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
