Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。

   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']
                    }
   					]
				}
           ]
		}
    ],

    renderContent(h,{node,data,store}){
        // div represents a row of tree control, div contains three span labels
        // determine the number of labels in the node's array, and select the class by trinomial operation
        // set the class to control the tree control for alignment
      return h('div',[
          // Add icon and image labels to the tree control custom function
          // The img tag needs to have 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])
          ]);
    },

<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 for each node
    renderContent(h,{node,data,store}){
        // div represents a row of the tree control, div contains three span tags
        // determine the number of labels in the node's array, and select the class by trilateration
        // set the class to control the tree control for alignment
      return h('div',[
          // add labels for icons and images to 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>