Vue Element-ui实现树形控件节点添加图标详解

目录

• 1.效果图
• 2.树形表格绑定数据加标签
• 3.所有代码
• 其他实现
• 总结

1.效果图

2.树形表格绑定数据加标签

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

   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.所有代码

其他实现

vue通过element树形控件实现树形表格

element树形控件添加虚线

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！