vue如何在引入的el-tree前添加圖標(biāo)
更新時間：2024年03月19日 08:44:50 作者：毅爭晨夕
這篇文章主要介紹了vue如何在引入的el-tree前添加圖標(biāo)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue引入的el-tree前添加圖標(biāo)
根據(jù)有沒有子節(jié)點來顯示 前面是文件夾還是文件的圖標(biāo) （因為遇到了就記錄了下來）
如果有子節(jié)點(children)，就在前面加上一個文件夾的圖標(biāo)(片)，如果沒有子節(jié)點，就顯示的是文件的圖標(biāo)(片)
只有部分代碼，在要push的地方添加一個icon，然后動態(tài)綁定這個icon，注意名字要一樣；
<template>
<div>
<el-tree
ref="addre"
:load="loNo"
:props="default-props"
lazy
node-key="id"
show-checkbox
:check-strictly="true"
@check="heiChange"
highlight-current
:key="this.sho"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="data.label" :class="folder">{{ `(${data.label})` }}</span>
<span v-if="!data.label" :class="data.icon"></span> //注意此處是動態(tài)的綁定下面 push進(jìn)去定義好的icon名稱；
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
</template><script>
export default {
data() {
return {
folder:'iconFolder', //顯示文件夾 下面有css樣式
file:'iconFile', //顯示文件 下面有css樣式
};
}，
methods：{ //省略的點點不重要，
loNo(aa,bb){
var data = []
//....
if (res.folders) {
//....
data.push({
//....
icon:this.folder //在這里追加個icon就行了，然后調(diào)上面data里的名稱
})
//....
}，
if (res.files) {
//....
data.push({
//....
icon:this.files //在這里追加個icon就行了，然后調(diào)上面data里的名稱
})
//....
}，
}
}
};
</script>//樣式
<style scoped>
.iconFolder::before{ //樣式名稱與data里的對應(yīng)
/* background-color: aqua; */
content:'';
/* float: left; */
display: inline-block;
width: 15px;
height: 15px;
/* border: 1px solid#000; */
background: url(../../assets/img/wenjianjia.png) no-repeat;
background-size: 15px;
}
.iconFile::before{ //樣式名稱與data里的對應(yīng)
/* background-color: aqua; */
content:'';
/* float: left; */
display: inline-block;
width: 15px;
height: 15px;
/* border: 1px solid#000; */
background: url(../../assets/img/wenjian.png) no-repeat;
background-size: 15px;
}
</style>還有一個方法我在看其他內(nèi)容發(fā)現(xiàn)，也是在span標(biāo)簽里套用了倆個img標(biāo)簽 進(jìn)行判斷他們children的長度，如果大于0，就顯示這個圖片，不用再push里添加icon了，因為用的是img標(biāo)簽，所以圖片直接放在了img上的src里了，就不用在這寫css了。
ElementUI el-tree樹形控件給節(jié)點添加圖標(biāo)
<template>
<div class="tree">
<el-tree :data="data5" node-key="id" default-expand-all >
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i :class="data.icon"></i>{{ node.label }}
</span>
</span>
</el-tree>
</div>
</template><script>
export default {
data () {
return {
data5: [{
id: 1,
label: '一級 1',
icon:'el-icon-success',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1',
icon: 'el-icon-info'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1',
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}]
}
}
}
</script>
<style scoped>
</style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue自定義表單內(nèi)容檢查rules實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3+ElementPlus在el-table表格中顯示時間的示例代碼
文章介紹了如何在Vue3+ElementPlus的el-table表格中顯示時間,并提供了相關(guān)的代碼示例,感興趣的朋友一起看看吧2025-02-02
探通過本篇文章給大家探討不同場景下組件間的數(shù)據(jù)“交流”的Vue實現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
詳解vue2.0 不同屏幕適配及px與rem轉(zhuǎn)換問題
這篇文章主要介紹了詳解vue2.0 不同屏幕適配及px與rem轉(zhuǎn)換問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了VUE項目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了深入理解Vue transition源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07 
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12 
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09