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

本篇内容主要讲解"Vue Element-ui如何实现树形控件节点添加图标"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue Element-ui如何实现树形控件节点添加图标"吧!

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-ui如何实现树形控件节点添加图标"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！