您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue Element-ui如何實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue Element-ui如何實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)”吧!
想要在樹形控件的樹節(jié)點(diǎn)加上圖片或者element-ui的圖標(biāo),可以在樹形表格綁定數(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ù)中
直接讓class等于element-ui的icon標(biāo)簽
img標(biāo)簽需要加上自己圖片的地址
renderContent(h,{node,data,store}){ // div代表樹形控件的一行,div中包含三個span標(biāo)簽 // 判斷節(jié)點(diǎn)的label數(shù)組數(shù)量,通過三目運(yùn)算來選擇class // 設(shè)置class來控制樹形控件進(jìn)行對齊 return h('div',[ // 在樹形控件自定義函數(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]) ]); },
<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)星名稱代號','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ù) node代表每個節(jié)點(diǎn) renderContent(h,{node,data,store}){ // div代表樹形控件的一行,div中包含三個span標(biāo)簽 // 判斷節(jié)點(diǎn)的label數(shù)組數(shù)量,通過三目運(yùn)算來選擇class // 設(shè)置class來控制樹形控件進(jìn)行對齊 return h('div',[ // 在樹形控件自定義函數(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>
到此,相信大家對“Vue Element-ui如何實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。