如何修改element-ui中tree組件的icon圖標(biāo)(小白都會(huì)的前端技能)
在樹形組件中,我們渲染到頁面上通常來表示一個(gè)組織架構(gòu)的流程,但一般在做的時(shí)候會(huì)設(shè)置打開和關(guān)閉為兩個(gè)不同的字體圖標(biāo)并且在點(diǎn)擊的時(shí)候可以切換
如下效果圖:
打開之前是小加號(hào)圖標(biāo),打開之后是小減號(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屬性來傳遞數(shù)據(jù)渲染視圖,也可以通過設(shè)置node來查看樹節(jié)點(diǎn)的響應(yīng)狀態(tài)
圖標(biāo)的狀態(tài)可以在vue組件里面查看
我們?cè)邳c(diǎn)擊小圖標(biāo)之前,屬性expanded的值為false
點(diǎn)擊小圖標(biāo)展開之后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)聽children有沒有值,如果沒有值,則表示當(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 項(xiàng)目部署在子目錄下時(shí)hash vs history 的真實(shí)區(qū)別解析
Vue子目錄部署中,hash模式穩(wěn)定且無需后端配合,而history模式需要后端支持否則容易出問題,子目錄部署下,hash模式天生安全且頁面刷新不會(huì)404,而history模式需要正確配置Nginx才能正常工作,本文給大家介紹Vue部署在子目錄下時(shí)hash vs history區(qū)別,感興趣的朋友一起看看吧2026-01-01
Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)記錄
聽說有的公司已經(jīng)開始用vue3了 趕緊打開B站學(xué)一下,下面這篇文章主要給大家介紹了關(guān)于Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能，倒計(jì)時(shí)的運(yùn)用場(chǎng)景是獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)、獲取郵箱驗(yàn)證碼倒計(jì)時(shí)等場(chǎng)景，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01
vue如何使用window.open打開頁面并拼接參數(shù)
這篇文章主要介紹了vue如何使用window.open打開頁面并拼接參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中echarts自動(dòng)輪播tooltip問題
這篇文章主要介紹了vue中echarts自動(dòng)輪播tooltip問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在Vue組件中,data函數(shù)用于定義組件的數(shù)據(jù),本文主要介紹了Vue組件data函數(shù)的具體使用,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
vue-treeselect?是一個(gè)多選組件，具有對(duì)?Vue.js嵌套選項(xiàng)支持，這篇文章主要介紹了關(guān)于vue-treeselect的基本用法,需要的朋友可以參考下2022-11-11
動(dòng)畫詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫演繹，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02