elementui树形控件选中-Vue Element-ui实现树形控制节点添加图标解释

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

VueElement-ui实现树形控制节点添加图标解释

更新时间：2021年11月23日15:57:05 作者：小木头。

本文主要向大家介绍Element-ui给树形控制节点添加图标的实现。 有一定的参考价值。 有兴趣的男士可以参考一下。 希望对您有所帮助。

目录

1、功效图

2. 树表绑定数据及标注

如果想在树形控件的树节点上添加图片或者element-ui图标，可以在树形表绑定数据中添加标签图标。

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

树形控件中自定义功能

直接让class等于element-ui的icon标签

img标签需要添加自己图片的地址

    renderContent(h,{node,data,store}){
        // div代表树形控件的一行，div中包含三个span标签
        // 判断节点的label数组数量，通过三目运算来选择class
        // 设置class来控制树形控件进行对齐
      return h('div',[
          // 在树形控件自定义函数中增加icon和图片的标签
          // img标签需要加上自己图片的地址
           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.全部代码

    

          
        


import { defineComponent, ref  } from 'vue'
export default defineComponent({
    components: {},
    data() {
        return {
              tree_data: [
        		{
          // type:1,
         		 label: 'notice-id1',
                  children: [
                        {
                          label: ['卫星名称代号','ZOHREH-2'],
                        },
                        {
                          label: ['组织机构','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:{
    // 自定义树形控件函数 node代表每个节点
    renderContent(h,{node,data,store}){
        // div代表树形控件的一行，div中包含三个span标签
        // 判断节点的label数组数量，通过三目运算来选择class
        // 设置class来控制树形控件进行对齐
      return h('div',[
          // 在树形控件自定义函数中增加icon和图片的标签
           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])
          ]);
    },
    }
    
})


    
.nodeStyle{
  width:110px;
  display:inline-block;
  text-align:left;
}
.groupStyle{
  width:150px;
  display:inline-block;
  text-align:left;
}
    

其他实现

Vue通过元素树控件实现树表

元素树控件添加实线

总结

本文到此结束。 希望对您有所帮助。 也希望大家多多关注脚本之家的更多内容！