【JSON渲染工具】Element UI动态生成表格,多行表头,自定义表头合并

这篇具有很好参考价值的文章主要介绍了【JSON渲染工具】Element UI动态生成表格,多行表头,自定义表头合并。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、JSON数据

  • table:中每个对象代表一张表格;
  • table_header:表示表格表头数据;
    • headerColor:表示表格表头背景颜色;
    • headerData:表示表格表头内容数据;
      • prop:值为与table_content中对象属性对应,data_list中的avgMen对应的prop需为"first.avgMen"(这里跟获取对象的点语法相似),如以下例子
      • label:值为表头文案
      • width:为列宽度
      • minWidrh:为列最小宽度
      • fixed:列左浮动或右浮动(值为left或right)
      • showOverflowTooltip:表示文案超过列宽度则内容不换行显示…,鼠标悬停显示全部文案弹框
      • children:表示合并表头
  • table_content:表示表格内容数据;
  • 如若有多张表格则在table中继续添加对象即可;
let table = [
  {
    table_content: [
      {
        device_id: "1613",
        device_name: "VIVO",
        device_level: "高",
        data_list: [
          {
            scene_name: "场景操作1",
            first: {
              //first对象表示第一轮测试
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              //secend对象表示第二轮测试
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              //avg对象表示平均数据
              a: 6,
              b: 3.1,
              c: 1
            }
          },
          {
            scene_name: "场景操作2",
            first: {
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              a: 0.61,
              b: 4444,
              c: 1
            }
          },
          //这里的控制用与显示空行
          {
            scene_name: "",
            first: {
              a: "",
              b: "",
              c: ""
            },
            secend: {
              a: "",
              b: "",
              c: ""
            },

            avg: {
              a: "",
              b: "",
              c: ""
            }
          },
          {
            type: "diff", ///这里的diff需要加的话都可以加
            scene_name: "场景操作2",
            first: {
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              a: 6,
              b: 3.1,
              c: 1
            }
          },
          {
            scene_name: "场景操作2",
            first: {
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              a: 6,
              b: 3.1,
              c: 1
            }
          }
        ]
      },
      {
        device_id: "1318",
        device_name: "iPhone SE 2",
        device_level: "中",
        data_list: [
          {
            scene_name: "场景操作1",
            first: {
              //first对象表示第一轮测试
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              //secend对象表示第二轮测试
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              //avg对象表示平均数据
              a: 6,
              b: 3.1,
              c: 1
            }
          },
          {
            scene_name: "场景操作2",
            first: {
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              a: 0.61,
              b: 4444,
              c: 1,
              avgFps: 1,
              jank: 1,
              bigJank: 1,
              drop: 1,
              temp: 1
            }
          },
          //这里的控制用与显示空行
          {
            scene_name: "",
            first: {
              a: "",
              b: "",
              c: ""
            },
            secend: {
              a: "",
              b: "",
              c: ""
            },

            avg: {
              a: "",
              b: "",
              c: ""
            }
          },
          {
            type: "diff",
            scene_name: "场景操作2",
            first: {
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              a: 6,
              b: 3.1,
              c: 1
            }
          },
          {
            scene_name: "场景操作2",
            first: {
              a: 6,
              b: 3.1,
              c: 1
            },
            secend: {
              a: 6,
              b: 3.1,
              c: 1
            },

            avg: {
              a: 6,
              b: 3.1,
              c: 1
            }
          }
        ]
      }
    ],
    table_header: {
      headerColor: "#F5F7FA",
      headerData: [
        {
          prop: "device_id",
          label: "设备ID",
          index: 2,
          minWidth: 90,
          fixed: "left"
        },
        {
          label: "设备名称",
          index: 2,
          prop: "device_name",
          minWidth: 100,
          showOverflowTooltip: true
        },
        {
          label: "设备档位",
          index: 2,
          prop: "device_level",
          minWidth: 90
        },
        {
          label: "场景操作",
          prop: "scene_name",
          minWidth: 250,
          showOverflowTooltip: true
        },
        {
          //第一论测试对应data_list中的first
          label: "第一论测试",
          prop: "first", //这里的prop值需对应data_list中第几轮的属性值即data_list中first对象为第第一轮测试,那么这里prop值就为first,如果上面的data_list中第一轮测试为first1对,这里的prop值就为first1
          children: [
            {
              //这里的first.a是指获取data_list中first的内存均值(first.a是对象获取值的方法(点语法))
              prop: "first.a",
              label: "内存均值",
              minWidth: 73
            },
            {
              //这里的first.b是指获取data_list中first的内存峰值
              prop: "first.b",
              label: "内存峰值",
              minWidth: 73
            },
            {
              prop: "first.c",
              label: "CPU均值",
              minWidth: 75
            }
          ]
        },
        {
          //第二论测试对应data_list中的secend
          label: "第二论测试",
          prop: "secend", //这里的prop值需对应data_list中第几轮的属性值即data_list中secend对象为第二轮测试,那么这里prop值就为secend,如果上面的data_list中第二轮测试为secend1对,这里的prop值就为secend1
          children: [
            {
              //这里的secend.a是指获取data_list中secend的内存均值(secend.a是对象获取值的方法(点语法))
              prop: "secend.a",
              label: "内存均值",
              minWidth: 73
            },
            {
              //这里的secend.b是指获取data_list中secend的内存峰值(secend.b是对象获取值的方法(点语法)),以此类推
              prop: "secend.b",
              label: "内存峰值",
              minWidth: 73
            },
            {
              prop: "secend.c",
              label: "CPU均值"
            }
          ]
        },

        {
          label: "平均数据",
          prop: "avg",
          children: [
            {
              prop: "avg.a",
              label: "内存均值",
              minWidth: 73
            },
            {
              prop: "avg.b",
              label: "内存峰值",
              minWidth: 73
            },
            {
              prop: "avg.c",
              label: "CPU均值",
              minWidth: 75
            }
          ]
        }
      ]
    }
  }
]

二、表格渲染结果

elementui动态生成表格,json,ui文章来源地址https://www.toymoban.com/news/detail-846037.html

三、页面代码暂无,仅为el-table的渲染数据格式

到了这里,关于【JSON渲染工具】Element UI动态生成表格,多行表头,自定义表头合并的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用element-ui渲染一个二级数据表格即复杂表格,并且自定标题

    最终完成的效果:  废话不多说:直接上代码,不懂来问   说明:关键的逻辑代码不方便展示,只放了表格样式代码,若直接cv,报错纯属正常!!! 另外:原创不易,转载请注明出处!!!

    2024年02月03日
    浏览(45)
  • 解决element ui大数据渲染表格时严重卡顿的问题

    element ui中的table表格组件在大量数据渲染的时候渲染会出现严重的卡顿问题,虽然网上也有很多解决方案,比如什么延迟加载,虚拟加载等等,这里为了避免走弯路,直接上终极解决方案大招:趁早换组件、马上换组件、现在就去换组件!!! 推荐组件:umy-ui 官方文档:u

    2024年03月17日
    浏览(53)
  • element ui table动态渲染表头

    1.在模板中,使用 v-for 指令遍历 tableData 数组,并将每个对象的属性作为表格的列名来渲染表头。 2.定义  tableColumns  数组,并在组件创建时根据数据动态生成它。如果想根据  tableData  中第一个对象的属性来渲染表头列,可以在  created  钩子函数中进行操作 3.当 tableData 的

    2024年02月08日
    浏览(39)
  • Element-ui 动态Table表格

    最近在做相关需求,感觉太多的重复代码,网上也很多这种动态的,写的很好,所以我借鉴了很多大佬的动态table表格,结合需求,完成了我自己需要的table。 1.config文件夹相关配置文件 2.一个用来配置的’pageTable.vue’文件 其实table 表格里面的align也可以动态,我这里偷懒了

    2024年02月11日
    浏览(38)
  • element-ui表格自定义动态列

    实现效果 具体功能 拖拽表头改变宽度 限制最小宽度, 实时保存设置。 隐藏列 选中列隐藏, 不显示在表格中。 “勾选” 列和\\\"操作\\\" 列不可隐藏, 并且不包含在列控制组件中。 隐藏后, 无论是否冻结均不显示。有特殊标识则要另外做判断。 列冻结 开启时, 表示选中列靠左冻结

    2024年01月24日
    浏览(43)
  • vue element-ui表格组件动态多级表头

    实际项目的需求,需要根据后端动态获取的方式来初始化表格的表头包含哪些信息,且有很多信息是有规律的,所以我们需要Element UI动态生成多级表头。需要的效果图如下: 由于统计维度是可变化的(它可以是省市也可以是区县),所以需要专门设置一个表格的数据来保存

    2024年02月10日
    浏览(52)
  • Vue+Element ui动态表格 实现表头自适应宽度

    根据业务需求,工作中会出现表头信息不固定,根据后台返回数据,我们要实现动态表格的实现 1. tableData为表格数据,tableHeader为表头数据。 2. 实现表头自适应宽度(二种方法)     ① 第一种通过动态width来定义,通过表头数据的遍历,将label的表头信息传入方法中     

    2024年02月15日
    浏览(48)
  • element-ui复杂table表格-动态新增列、动态调整行、列顺序

    目标: 实现一个复杂table具有以下功能:表格行展开、全部展开、收起、全部收起;可动态配置展示哪些列、调整列展示顺序;动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部 思路: 本质上就是将表格看成一个数组,对表格的操作当成对数组的操作。

    2024年02月11日
    浏览(49)
  • Element-ui的Carousel走马灯组件动态渲染高度

    在前端 vue 项目开发中经常会用到走马灯的场景,然而在采用Element-ui的情况下, el-carousel 走马灯组件有一个默认的固定高度 300px 。如下所示: 这样会导致网页的全屏的 banner 被压缩或拉伸,变形十分难看,在一个认真的切图仔眼里是无法容忍的。然而业务方在使用的时候没

    2024年02月03日
    浏览(48)
  • element-ui添加动态表格并合计行合并行操作

    项目开发过程中,我们有时候会遇到表格里面数据进行动态添加修改删除的操作,表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用! 最终实现的效果图如下: 注意:这里的新增操作人不能重复添加,新增的时候有

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包