如何修改element-ui中tree組件的icon圖標(biāo)(小白都會的前端技能)
在樹形組件中,我們渲染到頁面上通常來表示一個(gè)組織架構(gòu)的流程,但一般在做的時(shí)候會設(shè)置打開和關(guān)閉為兩個(gè)不同的字體圖標(biāo)并且在點(diǎn)擊的時(shí)候可以切換
如下效果圖:
打開之前是小加號圖標(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)
圖標(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)
總結(jié)
到此這篇關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的文章就介紹到這了,更多相關(guān)element-ui中tree組件icon圖標(biāo)修改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Vue運(yùn)算符報(bào)錯:Syntax Error: Unexpected token問題
這篇文章主要介紹了解決Vue運(yùn)算符報(bào)錯:Syntax Error: Unexpected token問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中@click.stop與@click.prevent解讀
Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默認(rèn)行為,這兩個(gè)方法在處理事件時(shí)非常有用2025-02-02
vue3+vite中報(bào)錯信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報(bào)錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細(xì)，對大家的學(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)基本的跨域請求封裝問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vant 在vue-cli 4.x中按需加載操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
登錄頁面的實(shí)現(xiàn)及跳轉(zhuǎn)代碼實(shí)例(vue-router)
在Vue.js中可以使用vue-router來實(shí)現(xiàn)前端路由,通過路由來跳轉(zhuǎn)頁面,這篇文章主要給大家介紹了關(guān)于登錄頁面的實(shí)現(xiàn)及跳轉(zhuǎn)(vue-router)的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue滾動tab跟隨切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
elementui的table列超出隱藏tooltip懸浮顯示問題
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11