【JSON渲染工具】Element UI动态生成表格，多行表头，自定义表头合并
【JSON渲染工具】Element UI动态生成表格，多行表头，自定义表头合并
- 一、JSON数据
- 二、表格渲染结果
- 三、页面代码暂无，仅为el-table的渲染数据格式
一、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
}
]
}
]
}
}
]
二、表格渲染结果
