700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML表格循环中合并单元格 table循环实现表格相同列合并

HTML表格循环中合并单元格 table循环实现表格相同列合并

时间:2021-09-24 07:55:47

相关推荐

HTML表格循环中合并单元格 table循环实现表格相同列合并

先上效果图:

实现代码:利用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"

}

]

}

],

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。