如何修改element-ui中tree組件的icon圖標(biāo)(小白都會(huì)的前端技能)
在樹(shù)形組件中,我們渲染到頁(yè)面上通常來(lái)表示一個(gè)組織架構(gòu)的流程,但一般在做的時(shí)候會(huì)設(shè)置打開(kāi)和關(guān)閉為兩個(gè)不同的字體圖標(biāo)并且在點(diǎn)擊的時(shí)候可以切換
如下效果圖:
打開(kāi)之前是小加號(hào)圖標(biāo),打開(kāi)之后是小減號(hào)圖標(biāo)
具體方法:
使用element-ui組件設(shè)置樣式:
icon-class ="圖標(biāo)類名"可以設(shè)置圖標(biāo)樣式
但我們要實(shí)現(xiàn)動(dòng)態(tài)切換不能直接設(shè)置,需要使用#default方法
注意#default里不僅可以設(shè)置data屬性來(lái)傳遞數(shù)據(jù)渲染視圖,也可以通過(guò)設(shè)置node來(lái)查看樹(shù)節(jié)點(diǎn)的響應(yīng)狀態(tài)
圖標(biāo)的狀態(tài)可以在vue組件里面查看
我們?cè)邳c(diǎn)擊小圖標(biāo)之前,屬性expanded的值為false
點(diǎn)擊小圖標(biāo)展開(kāi)之后expanded的值為true
設(shè)置icon-class=""用于動(dòng)態(tài)切換icon圖標(biāo)
<i v-if="data.children.length===0" class="el-icon-circle-plus-outline" />
監(jiān)聽(tīng)children有沒(méi)有值,如果沒(méi)有值,則表示當(dāng)前分支為最底層分支,圖標(biāo)顯示小減號(hào)(el-icon-remove-outline)
<i v-else :class="node.expanded?'el-icon-remove-outline':'el-icon-circle-plus-outline'" />
如果children數(shù)組里面有值,則表示其下有分支,點(diǎn)擊之前為小加號(hào)(el-icon-circle-plus-outline),點(diǎn)擊之后為小減號(hào)(el-icon-circle-plus-outline)
總結(jié)
到此這篇關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的文章就介紹到這了,更多相關(guān)element-ui中tree組件icon圖標(biāo)修改內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問(wèn)題
這篇文章主要介紹了解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中@click.stop與@click.prevent解讀
Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默認(rèn)行為,這兩個(gè)方法在處理事件時(shí)非常有用2025-02-02
vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本
這篇文章主要介紹了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本的跨域請(qǐng)求封裝問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vant 在vue-cli 4.x中按需加載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue設(shè)置頁(yè)面背景及背景圖片簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁(yè)面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開(kāi)發(fā)中我們經(jīng)常要向頁(yè)面中添加背景圖片,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
登錄頁(yè)面的實(shí)現(xiàn)及跳轉(zhuǎn)代碼實(shí)例(vue-router)
在Vue.js中可以使用vue-router來(lái)實(shí)現(xiàn)前端路由,通過(guò)路由來(lái)跳轉(zhuǎn)頁(yè)面,這篇文章主要給大家介紹了關(guān)于登錄頁(yè)面的實(shí)現(xiàn)及跳轉(zhuǎn)(vue-router)的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)tab跟隨切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
elementui的table列超出隱藏tooltip懸浮顯示問(wèn)題
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11