先上效果图:
实现代码:利用lb-element-table实现。
template中:
{{table.indicatorType}}
注:其中merge中的数组是你需要合并的列的属性名。
data中定义column:
column = [
{
prop: "project",
label: "项目"
},
{
prop: "indicatorName",
label: "指标"
}
];
data中定义tableData的值:
listData: [
{
indicatorType: "指标分类1",
tableData: [
{
project: "工艺流程名称2",
indicatorName: "指标名称2",
name: "-01-01",
value1: "8",
value2: "90",
value3: "14",
value4: "14",
value5: "10",
value6: "17",
value7: "1",
unit: "kg"
},
{
project: "工艺流程名称2",
indicatorName: "指标名称2",
name: "-01-02",
value1: "10",
value2: "1",
value3: "140",
value4: "100",
value5: "10",
value6: "14",
value7: "10"
},
{
project: "工艺流程名称3",
indicatorName: "指标名称2",
name: "-01-02",
value1: "10",
value2: "10",
value3: "10",
value4: "10",
value5: "10",
value6: "10",
value7: "10"
},
{
project: "工艺流程名称3",
indicatorName: "指标名称2",
name: "-01-03",
value1: "10",
value2: "10",
value3: "10",
value4: "10",
value5: "10",
value6: "10",
value7: "10"
},
{
project: "工艺流程名称4",
indicatorName: "指标名称2",
value1: "10",
value2: "10",
value3: "10",
value4: "10",
value5: "10",
value6: "10",
value7: "10"
}
]
},
{
indicatorType: "指标分类2",
tableData: [
{
project: "工艺流程名称6",
indicatorName: "指标名称2",
name: "-01-01",
value1: "10",
value2: "1",
value3: "10",
value4: "10",
value5: "102",
value6: "107",
value7: "1",
unit: "kg"
},
{
project: "工艺流程名称6",
indicatorName: "指标名称2",
name: "-01-02",
value1: "10",
value2: "106",
value3: "10",
value4: "10",
value5: "106",
value6: "10",
value7: "10"
},
{
project: "工艺流程名称6",
indicatorName: "指标名称2",
name: "-01-02",
value1: "106",
value2: "10",
value3: "10",
value4: "10",
value5: "10",
value6: "10",
value7: "106"
},
{
project: "工艺流程名称7",
indicatorName: "指标名称2",
name: "-01-03",
value1: "10",
value2: "10",
value3: "10",
value4: "106",
value5: "10",
value6: "10",
value7: "10"
},
{
project: "工艺流程名称7",
indicatorName: "指标名称2",
value1: "10",
value2: "10",
value3: "1",
value4: "10",
value5: "10",
value6: "10",
value7: "10"
}
]
}
],
如果觉得《HTML表格循环中合并单元格 table循环实现表格相同列合并》对你有帮助,请点赞、收藏,并留下你的观点哦!