【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的渲染数据格式
本文转载自: https://blog.csdn.net/m0_61049675/article/details/133794628
版权归原作者 香菜啵子欸 所有， 如有侵权，请联系我们删除。
版权归原作者 香菜啵子欸 所有， 如有侵权，请联系我们删除。