先上效果图:

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

value1: "8",

value2: "90",

value3: "14",

value4: "14",

value5: "10",

value6: "17",

value7: "1",

unit: "kg"

},

{

project: "工艺流程名称2",

indicatorName: "指标名称2",

name: "2019-01-02",

value1: "10",

value2: "1",

value3: "140",

value4: "100",

value5: "10",

value6: "14",

value7: "10"

},

{

project: "工艺流程名称3",

indicatorName: "指标名称2",

name: "2019-01-02",

value1: "10",

value2: "10",

value3: "10",

value4: "10",

value5: "10",

value6: "10",

value7: "10"

},

{

project: "工艺流程名称3",

indicatorName: "指标名称2",

name: "2019-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: "2019-01-01",

value1: "10",

value2: "1",

value3: "10",

value4: "10",

value5: "102",

value6: "107",

value7: "1",

unit: "kg"

},

{

project: "工艺流程名称6",

indicatorName: "指标名称2",

name: "2019-01-02",

value1: "10",

value2: "106",

value3: "10",

value4: "10",

value5: "106",

value6: "10",

value7: "10"

},

{

project: "工艺流程名称6",

indicatorName: "指标名称2",

name: "2019-01-02",

value1: "106",

value2: "10",

value3: "10",

value4: "10",

value5: "10",

value6: "10",

value7: "106"

},

{

project: "工艺流程名称7",

indicatorName: "指标名称2",

name: "2019-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循环实现表格相同列合并相关推荐

  1. asp.net mvc excel合并单元格_excel统计求和:如何在合并后的单元格中复制求和公式...

    编按:哈喽,大家好!又到了一年一度的双十一购物狂欢节,小伙伴们有没有蠢蠢欲动呢?钱包都准备好了吗!这个双十一,大家都盯上了哪些好物呢?哪类产品的开销又会成为你贡献双十一销售额的主力军呢?赶紧在exce ...

  2. EasyExcel合并单元格,通过注解方式实现自定义合并策略

    EasyExcel合并单元格,通过注解方式实现自定义合并策略 简介 今天博主探讨如何实现EasyExcel自定义实现单元格合并策略,考虑需要抽象代码.适用于更多的业务场景,提供了两个工具类,参考过很多 ...

  3. html两个th合并单元格,10、HTML表格(table 、th、tr、td、合并单元格)的简单认识...

    1.表格的定义 表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列 ...

  4. 用XSSFWorkbook导出合并单元格样式的excel表格

    1.先从数据库获取将要导出的数据 2.建立一个表格 XSSFWorkbook workbook = new XSSFWorkbook(); XSSFSheet sheet = workbook.cre ...

  5. html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例

    本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...

  6. html怎么把excel表格合并单元格,巧用格式刷实现Excel合并后保留原单元格数据

    合并单元格是用户在制作表格时常用的命令,它可以把多个单元格显示成一个单元格,起到美化的作用. 通常情况下,如果把几个含有数据的单元格进行合并,Excel会提示"在合并单元格时,如果选择的单元 ...

  7. Python使用OpenPyXl设置Excel表格中的单元格大小(行高和列宽)

    文章目录 1. 按 2. 设置单行和一列的长和宽 3. 设置所有行和全部列的长和宽 1. 按 本文主要讨论 openpyxl如何设置(调整)单元格大小(行高和列宽),其他功能可参考:Python3 进 ...

  8. html合并单元格和其中的数据,巧妙提取合并单元格及对应单元格数据

    在WPS表格中,我们经常会用到合并单元格.在很多情况下,使用合并单元格会使表格更加醒目.条理.但你遇到过提取合并单元格的数据的问题吗?如图1所示,左侧为某位老师辛辛苦苦建立的学生成绩汇总表,郁闷的是现 ...

  9. python的openpyxl模块合并单元格,浅谈openpyxl库,遇到批量合并单元格的问题

    我就废话不多说了,大家还是直接看代码吧~ from openpyxl import Workbook from openpyxl import load_workbook from openpyxl. ...

  10. excel模板合并单元格(jxls 合并单元格)---工具net.sf.jxls扩展---支持合并单元格(无需代码方式合并)

    概述 excel比较常用的工具类就是poi和jxl当然后者已经停止维护很久而且只支持excel2003,不支持excel2007. 对2003版,最大行数是65536行 ,对2007以上版本,最大行数 ...

最新文章

  1. SpringBoot枚举传参
  2. python判断字母左右两边的大写字母有_python习题,,1.26个字母大小写
  3. 《研磨设计模式》chap18 状态模式state(1)模式简介
  4. python中引用计数_Python引用计数操作示例
  5. [Luogu P2893][USACO08FEB]修路Making the Grade
  6. Automatic Tumor Segmentation from MRI scans 阅读笔记
  7. 国内AGV机器人厂家数目统计及区域分布分析
  8. iOS12完美越狱来了!漫谈iOS12缓解机制
  9. html5中框架怎么写,html框架布局模板
  10. Navicat连接失败
  11. 如何使用adb卸载手机系统内部软件
  12. 最新emoji表情代码大全_2020最新霜降早上好祝福语动态表情图片大全带字 温馨的霜降问候语免打字图片...
  13. U盘html文件恢复不了,u盘文件突然不见了怎么恢复?恢复小技巧来了
  14. keytool 错误: java.io.IOException: Keystore was tampered with, or password was incorrect----gt;解决方法
  15. php 指纹验证失败,为什么手指沾了水,指纹识别就会失效?液体会导致指纹解锁失败?...
  16. 西北大学本科毕业论文答辩PPT模板
  17. OHIF记录(二)——Viewers和React-vtk工具包互联
  18. 硬盘分区-从其他盘划分容量到c盘
  19. 嵌入式Linux的内核编译
  20. Oracle-OGG trail 文件大小引起的进程异常 OGG-01172

热门文章

  1. matlab分式函数求解,科学网—用MATLAB编写预估-校正法程序求分数阶常微分方程组数值解 - 王福昌的博文...
  2. 华北电力保定校区计算机专业好就业吗,2021年华北电力大学(保定)专业排行榜,哪个专业就业比较好...
  3. 一元二次方程极简新解法
  4. oracle 物化视图 on demand,【案例】Oracle物化视图 on prebuilt table故障常见解决办法...
  5. hang计算机术语大全,行业英语学习
  6. 离线强化学习-4 DP-based方法
  7. matlab求两向量夹角_matlab入门练习
  8. Unity 实现两个向量夹角为0~360度
  9. 计算机算单元格个数,罕见知识点–Excel 参数这样用,才能算出区域内文本单元格的数量...
  10. 基于PT100铂电阻的高精度测温方法