How to add Icon to Tree Control Node by Vue Element-ui
This article mainly explains "Vue Element-ui how to add icons to tree control nodes". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to add icons to tree control nodes in Vue Element-ui.
1. Effect picture
two。 Tree table binding data tagging
To add a picture or element-ui icon to the tree node of a tree control, you can add the label icon to the tree table bound data
Children: [{icon:'el-icon-top-right', label: ['beam name','], children: [{label: ['name','RS49'],}, {icon:'src/assets/images/Organization.png' Label: ['group (' + '399')',''] children: [{label: ['10600361', 10950, '11200' '0']}]
In the tree control custom function
Directly make class equal to the icon tag of element-ui
The img tag needs to add the address of its own picture.
RenderContent (h, {node,data,store}) {/ / div represents a row of tree controls, and the div contains three span tags / / the number of label arrays of decision nodes Select class / / set class through trinomial operation to control the tree control to align return h ('div', [/ / adding icon and picture tags / / img tags in the tree control custom function requires adding the address of your picture 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. All codes import {defineComponent, ref} from 'vue'export default defineComponent ({components: {}, data () {return {tree_data: [{/ / type:1, label:' notice-id1' Children: [{label: ['satellite name code', 'ZOHREH-2'],}, {label: [' organization', 'IRN'],} {label: ['frequency range', '10950-1450'],}, {icon:'el-icon-top-right', label: [' beam name','] Children: [{label: ['name','RS49'],}, {label: [' freq_min','10950'] }, {label: ['freq_max','14500'],}, {icon:'src/assets/images/Organization.png' Label: ['group (' + '399')',''] children: [{label: ['10600361', 10950, '11200' '0']}, {label: [' 10600361, 10950, 11200, 0']} {label: ['10600361 "10950"11200" '0']}]]},],},] DefaultProps: {children: 'children', label:' label',},}}, method: {/ / Custom tree control function node represents each node renderContent (h, {node,data,store}) {/ / div represents a row of the tree control Div contains three span tags / / determine the number of label arrays of nodes. Select class / / set class through binocular operation to control the tree control to align return h ('div', [/ / add the label h of icon and picture to the tree control custom function (' 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]));},}}) .nodeStyle {width:110px; display:inline-block; text-align:left;} .groupStyle {width:150px; display:inline-block; text-align:left } at this point, I believe you have a deeper understanding of "how to add icons to tree control nodes in Vue Element-ui". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
