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.所有代码
<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: ['卫星名称代号','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])]);},}})</script><style lang="scss" scoped>.nodeStyle{width:110px;display:inline-block;text-align:left;}.groupStyle{width:150px;display:inline-block;text-align:left;}</style>
其他实现
vue通过element树形控件实现树形表格
element树形控件添加虚线
