Vue Element

目录

1.效果图

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

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

   children: [       {           icon:'el-icon-qq空间怎么添加免费音乐top-right',           label: ['beam名称',''],           children: [               {                再别康桥配乐   label:['name','rs49'],               },               {                   icon:'src/asts/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/asts/images/organization.png',                                  label:['group('+'3'+')','']                                  children:[                                     {                                        label:['10600361','10950','11200','0']                                     },                                    {                                        label:['10600361','10950','11200','0']                                     },                                    {                                        label:['10600361','10950','11200','0ps是什么单位']                                     }                                  ]                              }                      ]                    },                  ],                },              ],            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/asts/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>

其他实现

总结

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