Vue Element-ui實(shí)現(xiàn)樹(shù)形控件節(jié)點(diǎn)添加圖標(biāo)詳解
更新時(shí)間：2021年11月23日 15:57:05 作者：一只小木頭.
這篇文章主要為大家介紹了Element-ui實(shí)現(xiàn)樹(shù)形控件節(jié)點(diǎn)添加圖標(biāo)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1.效果圖
2.樹(shù)形表格綁定數(shù)據(jù)加標(biāo)簽
想要在樹(shù)形控件的樹(shù)節(jié)點(diǎn)加上圖片或者element-ui的圖標(biāo)，可以在樹(shù)形表格綁定數(shù)據(jù)中加上標(biāo)簽icon
children: [
{
icon:'el-icon-top-right',
label: ['beam名稱',''],
children: [
{
label:['name','RS49'],
},
{
icon:'src/assets/images/Organization.png',
label:['group('+'3'+')','']
children:[
{
label:['10600361','10950','11200','0']
}
]
}
]
}
],
在樹(shù)形控件自定義函數(shù)中
直接讓class等于element-ui的icon標(biāo)簽
img標(biāo)簽需要加上自己圖片的地址
renderContent(h,{node,data,store}){
// div代表樹(shù)形控件的一行，div中包含三個(gè)span標(biāo)簽
// 判斷節(jié)點(diǎn)的label數(shù)組數(shù)量，通過(guò)三目運(yùn)算來(lái)選擇class
// 設(shè)置class來(lái)控制樹(shù)形控件進(jìn)行對(duì)齊
return h('div',[
// 在樹(shù)形控件自定義函數(shù)中增加icon和圖片的標(biāo)簽
// img標(biāo)簽需要加上自己圖片的地址
h('span',{class:'top-right'}),
h('img',{src:data.icon}),
h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
h('span', {class:'groupStyle'},node.label[1]),
h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
]);
},
3.所有代碼
<template>
<div class="mytree">
<el-tree
:data="tree_data"
:props="defaultProps"
@node-click="handleNodeClick"
indent="0"
:render-content="renderContent"
></el-tree>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: {},
data() {
return {
tree_data: [
{
// type:1,
label: 'notice-id1',
children: [
{
label: ['衛(wèi)星名稱代號(hào)','ZOHREH-2'],
},
{
label: ['組織機(jī)構(gòu)','IRN'],
},
{
label: ['頻率范圍','10950-1450'],
},
{
icon:'el-icon-top-right',
label: ['beam名稱',''],
children: [
{
label:['name','RS49'],
},
{
label:['freq_min','10950'],
},
{
label:['freq_max','14500'],
},
{
icon:'src/assets/images/Organization.png',
label:['group('+'3'+')','']
children:[
{
label:['10600361','10950','11200','0']
},
{
label:['10600361','10950','11200','0']
},
{
label:['10600361','10950','11200','0']
}
]
}
]
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
method:{
// 自定義樹(shù)形控件函數(shù) node代表每個(gè)節(jié)點(diǎn)
renderContent(h,{node,data,store}){
// div代表樹(shù)形控件的一行，div中包含三個(gè)span標(biāo)簽
// 判斷節(jié)點(diǎn)的label數(shù)組數(shù)量，通過(guò)三目運(yùn)算來(lái)選擇class
// 設(shè)置class來(lái)控制樹(shù)形控件進(jìn)行對(duì)齊
return h('div',[
// 在樹(shù)形控件自定義函數(shù)中增加icon和圖片的標(biāo)簽
h('span',{class:[data.icon,data.icon==='el-icon-top-right'? 'top-right':'bottom-left']}),
h('img',{src:data.icon === 'src/assets/images/Organization.png' ? data.icon:''}),
h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
h('span', {class:'groupStyle'},node.label[1]),
h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
]);
},
}
})
</script>
<style lang="scss" scoped>
.nodeStyle{
width:110px;
display:inline-block;
text-align:left;
}
.groupStyle{
width:150px;
display:inline-block;
text-align:left;
}
</style>
其他實(shí)現(xiàn)
vue通過(guò)element樹(shù)形控件實(shí)現(xiàn)樹(shù)形表格
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
在使用vue開(kāi)發(fā)項(xiàng)目的時(shí)候,很多使用會(huì)import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導(dǎo)入三種方式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue動(dòng)態(tài)綁定圖標(biāo)的完整步驟
動(dòng)態(tài)綁定是我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求，下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定圖標(biāo)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue-cli3.0使用及部分配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue使用highcharts自定義圖例點(diǎn)擊事件
這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義圖例點(diǎn)擊事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vuejs第八篇之Vuejs組件的定義實(shí)例解析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue-devtools安裝使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了vue中給路徑起別名的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10
Vue如何實(shí)現(xiàn)驗(yàn)證碼輸入交互
這篇文章主要介紹了Vue實(shí)現(xiàn)驗(yàn)證碼輸入交互的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12