Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.