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

 更新时间:2021-12-17 12:01:53   作者:佚名   我要评论(0)

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

2.树形表格绑定数据加标签
想要在树形控件的树节点加上图片或者elem

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树形控件添加虚线

总结

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

您可能感兴趣的文章:
  • vue通过element树形控件实现树形表格
  • Vue?element树形控件添加虚线详解
  • vue Element-ui表格实现树形结构表格
  • Vue组件库ElementUI实现表格加载树形数据教程
  • vue+element UI实现树形表格
  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

您可能感兴趣的文章:

相关文章

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

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

    目录1.效果图2.树形表格绑定数据加标签3.所有代码其他实现总结1.效果图 2.树形表格绑定数据加标签 想要在树形控件的树节点加上图片或者elem
    2021-12-17
  • vue仿网易云音乐播放器界面的简单实现过程

    vue仿网易云音乐播放器界面的简单实现过程

    由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能。 前端简单的使用vue组
    2021-12-17
  • JavaScript闭包详解

    JavaScript闭包详解

    目录1.?什么是闭包2.?闭包的作用2.1) 记忆性2.2) 模拟私有变量3.?闭包的注意点总结1.?什么是闭包 闭包:函数本身和该函数声明时所处的环境状
    2021-12-17
  • 在.NET?6中使用日志组件log4net的方法

    在.NET?6中使用日志组件log4net的方法

    本文将简单介绍在.NET 6中使用log4net的方法,具体见下文范例。 1.首先新建一个ASP.NET Core空项目 2.通过Nuget包管理器安装下面两个包 lo
    2021-12-17
  • Vue在echarts?tooltip中添加点击事件案例详解

    Vue在echarts?tooltip中添加点击事件案例详解

    目录需求解决方法1、设置tooltip2、定义hookToolTip变量3、在methods中添加方法4、完整代码需求 需要在echarts tooltip点击学校的名称,跳转
    2021-12-17
  • Vue实现跑马灯样式文字横向滚动

    Vue实现跑马灯样式文字横向滚动

    本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤
    2021-12-17
  • 详解jQuery的拷贝对象

    详解jQuery的拷贝对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
    2021-12-17
  • python安装pillow的三种方法

    python安装pillow的三种方法

    目录第一种方法第二种方法第三种方法安装pillow(python的图形界面库) 第一种方法 在Dos界面输入pip install pillow(但是不知为何总是失败);
    2021-12-17
  • fetch网络请求封装示例详解

    fetch网络请求封装示例详解

    export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let options = { method } // data不为空
    2021-12-17
  • 利用js实现简单开关灯代码

    利用js实现简单开关灯代码

    body部分: <button>开关灯</button> script部分: <script> // window.onload 是窗口加载事件,可以实现将代码写到元素
    2021-12-17

最新评论