Vue Element-ui implements tree control node adding icon detailed explanation

1. Rendering
2. Bind data and add labels to the tree table
3. All codes
Other Implementations
Summarize

1. Rendering

Rendering

2. Bind data and add labels to the tree table

If you want to add an image or element-ui icon to the tree node of the tree control, you can add a label icon to the tree table binding data.

   children: [
       {
           icon:'el-icon-top-right',
           label: ['beam name',''],
           children: [
               {
                   label:['name','RS49'],
               },
               {
                   icon:'src/assets/images/Organization.png',
                   label:['group('+'3'+')','']
                   children:[
                   {
                   label:['10600361','10950','11200','0']
                    }
   					]
				}
           ]
		}
    ],

In the custom function of the tree control

Directly set the class to be equal to the icon tag of element-ui

The img tag needs to add the address of your own picture

    renderContent(h,{node,data,store}){
        //div represents a row of the tree control, and div contains three span tags // Determine the number of label arrays of the node and select the class through ternary operation
        // Set the class to control the alignment of the tree control return h('div',[
          // Add icon and image tags in the custom function of the tree control // The img tag needs to add the address of its own image 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

<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: ['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('+'3'+')','']
                                  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, and div contains three span tags // Determine the number of label arrays of the node and select the class through ternary operation
        // Set the class to control the alignment of the tree control return h('div',[
          // Add icon and picture labels in the tree control custom function 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>

Other Implementations

Vue implements tree table through element tree control

Add a dotted line to the element tree control

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Vue+ElementUI implements paging function-mysql data
Vue+elementui realizes multiple selection and search functions of drop-down table
Use vue2+elementui for hover prompts
Detailed explanation of the use of ElementUI in Vue
How to install Element UI and use vector graphics in vue3.0

<<: Invalid solution when defining multiple class attributes in HTML

>>: Writing High-Quality Code Web Front-End Development Practice Book Excerpts