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

已于 2024-01-30 15:50:05 修改
阅读量1.6k 收藏 5
点赞数
文章标签： json ui
于 2023-10-12 18:09:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61049675/article/details/133794628
版权

【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
            }
          ]
        }
      ]
    }
  }
]

二、表格渲染结果

在这里插入图片描述

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

香菜啵子欸
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
css画表格多级表头,element UI实现动态生成多级表头
weixin_29731589的博客
08-03 934
一、效果图二、封装两个组件，分别为DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用递归来对表头进行循环生成DynamicTable.vueimport TableColumn from './TableColumn'export default {props: {// 表格的数据tableData: {type: Array,require...
JS自动把JSON数据转换成表格
05-28
可以直接将JSON数据生成表格 生成的表格可以是HTML字符串 也可以是OBJECT 操作简单，三步即可实现数据转换成表格。
VUE element UI实现动态生成多级表头递归循环生成
qq_42619759的博客
03-14 1005
【代码】VUE element UI实现动态生成多级表头递归循环生成。
pc端element表格实现动态列及导出xlsx
2401_82730858的博客
06-13 248
pc端element表格实现动态列及导出xlsx
vue2 elementui 封装一个动态表格复杂组件
gxdzi的博客
03-08 1095
在 Vue 2 和 Element UI 中封装一个动态表格组件意味着要创建一个组件，它能够根据传入的数据和配置动态地生成表格，并支持排序、筛选、分页等功能。首先，确保你已经安装了 Element UI，并在你的 Vue 项目中正确地引入和使用了它。然后，创建一个新的 Vue 组件，比如 DynamicTable.vue。
element UI 动态生成表头
nihao561的博客
02-03 6502
element UI 动态生成表头 拖拽
element ui html 渲染,Vue+ElementUI实现表单动态渲染、可视化配置的方法
weixin_39524741的博客
07-04 1618
这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下动态渲染就是有一个异步的数据，大概长这样：{"inline": true,"labelPosition": "right","labelWidth": "","size": "small","statusIcon": true,"formItemList": [{"type": "input","l...
element-plus的el-table自定义表头筛选查询
i_am_a_div的博客
07-17 479
element-plus的el-table自定义表头筛选查询
element-ui 动态表头渲染表格
weixin_33862514的博客
08-19 4601
在ElementUI官方文档中，描述的动态渲染只是单纯的将已知字段名称的JSON数据通过prop属性填充到页面中，下为官方文档内容 <template> <el-table :data="tableData" style="width: 100%"> <el-...
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
Element实现表格嵌套、多个表格共用一个表头的方法
10-15
在本文中，我们将深入探讨如何使用Element UI库在Vue.js应用中实现表格嵌套和多个表格共用一个表头的功能。Element UI是一个流行的前端组件库，提供了丰富的UI组件，包括表格（Table）组件，用于创建复杂的表格布局...
VUE.js+element-ui实现JSON编辑器
07-24
在这个"VUE.js+element-ui实现JSON编辑器"项目中，开发者利用Vue.js的响应式数据绑定和组件化特性，结合Element-UI的组件库，创建了一个可以在网页上编辑JSON数据的工具。JSON（JavaScript Object Notation）是一种...
利用vue和element-ui设置表格内容分页的实例
08-27
Vue 和 Element UI 实现表格内容分页的实例分析 Vue 是一款流行的前端框架，而 Element UI 是一个基于 Vue 的 UI 组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。在本文中，我们将探讨如何使用 Vue...
element-ui表格有数据但就是无法渲染
柳牧文的博客
01-16 4539
vue+element-ui表格无法渲染
微信小程序安装vant组件库和使用
qq_61132537的博客
07-23 711
van-button type="primary">主要按钮</van-button>
本地部署SearXNG
m0_62458145的博客
07-23 505
当您安装 SearXNG 时，默认的输出格式是 HTML 格式。请将以下行添加到 settings.yml 文件中。如前面的示例所示，settings.yml 文件位于 ${PWD}/searxng/settings.yml。SearXNG 是一个免费的互联网元搜索引擎，整合了各种搜索服务的结果。用户不会被跟踪，也不会被分析。中填写访问地址，例如：http://x.x.x.x:8080，如果你想通过其他方式安装 SearXNG，请参考。3. 在 Dify 中集成 SearXNG。
HTTP请求入参类型解读
最新发布
Bekind2010的专栏
07-24 1074
在HTTP请求中，请求头用于指示资源的MIME类型，即请求体的媒体类型。它告诉服务器实际发送的数据类型是什么，以便服务器能够正确地解析和处理这些数据。可以有多种值，每种值都对应着不同的媒体类型。以下是一些常见的?enctypeenctypeform-datatext/plaintext/plaintext/htmltext/htmltext/xmltext/xmltext/xml每种都对应着不同的数据格式和用途，选择合适的对于确保数据被正确解析和处理至关重要。
element ui表头根据后端返回数据动态渲染多级表头
05-17
可以通过动态生成表头的方式来实现根据后端返回数据动态渲染多级表头，具体的实现步骤如下： 1. 获取后端返回的表头数据，可以通过 API 接口获取。 2. 遍历表头数据，生成对应的列对象。可以使用 Element UI 表格组件中的 column 属性来实现。 3. 如果当前列对象有子列，那么递归生成子列对象。 4. 将生成的列对象数组作为表格组件的 columns 属性进行渲染。 以下是一个示例代码： ```vue <template> <el-table :data="tableData" :columns="tableColumns" border ></el-table> </template> <script> export default { data() { return { tableData: [], tableColumns: [], }; }, methods: { // 获取后端返回的表头数据 async fetchTableHeader() { const res = await fetch('/api/table/header'); const headerData = await res.json(); this.tableColumns = this.generateColumns(headerData); }, // 递归生成列对象 generateColumns(headerData) { return headerData.map((item) => { const column = { label: item.label, prop: item.prop, }; if (item.children && item.children.length) { column.children = this.generateColumns(item.children); } return column; }); }, // 获取后端返回的表格数据 async fetchTableData() { const res = await fetch('/api/table/data'); this.tableData = await res.json(); }, }, mounted() { this.fetchTableHeader(); this.fetchTableData(); }, }; </script> ``` 在这个示例代码中，通过 fetchTableHeader 方法获取后端返回的表头数据，并使用 generateColumns 方法生成对应的列对象，如果当前列对象有子列，那么会递归生成子列对象。最后将生成的列对象数组作为表格组件的 columns 属性进行渲染。 需要注意的是，由于表格数据是异步获取的，因此需要在获取表头数据和表格数据之后再进行渲染。在这个示例代码中，通过 mounted 钩子函数来依次调用 fetchTableHeader 和 fetchTableData 方法获取数据，并在获取数据完成后渲染表格组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值