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: "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循环实现表格相同列合并相关推荐
- asp.net mvc excel合并单元格_excel统计求和:如何在合并后的单元格中复制求和公式...
编按:哈喽,大家好!又到了一年一度的双十一购物狂欢节,小伙伴们有没有蠢蠢欲动呢?钱包都准备好了吗!这个双十一,大家都盯上了哪些好物呢?哪类产品的开销又会成为你贡献双十一销售额的主力军呢?赶紧在exce ...
- EasyExcel合并单元格,通过注解方式实现自定义合并策略
EasyExcel合并单元格,通过注解方式实现自定义合并策略 简介 今天博主探讨如何实现EasyExcel自定义实现单元格合并策略,考虑需要抽象代码.适用于更多的业务场景,提供了两个工具类,参考过很多 ...
- html两个th合并单元格,10、HTML表格(table 、th、tr、td、合并单元格)的简单认识...
1.表格的定义 表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列 ...
- 用XSSFWorkbook导出合并单元格样式的excel表格
1.先从数据库获取将要导出的数据 2.建立一个表格 XSSFWorkbook workbook = new XSSFWorkbook(); XSSFSheet sheet = workbook.cre ...
- html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
- html怎么把excel表格合并单元格,巧用格式刷实现Excel合并后保留原单元格数据
合并单元格是用户在制作表格时常用的命令,它可以把多个单元格显示成一个单元格,起到美化的作用. 通常情况下,如果把几个含有数据的单元格进行合并,Excel会提示"在合并单元格时,如果选择的单元 ...
- Python使用OpenPyXl设置Excel表格中的单元格大小(行高和列宽)
文章目录 1. 按 2. 设置单行和一列的长和宽 3. 设置所有行和全部列的长和宽 1. 按 本文主要讨论 openpyxl如何设置(调整)单元格大小(行高和列宽),其他功能可参考:Python3 进 ...
- html合并单元格和其中的数据,巧妙提取合并单元格及对应单元格数据
在WPS表格中,我们经常会用到合并单元格.在很多情况下,使用合并单元格会使表格更加醒目.条理.但你遇到过提取合并单元格的数据的问题吗?如图1所示,左侧为某位老师辛辛苦苦建立的学生成绩汇总表,郁闷的是现 ...
- python的openpyxl模块合并单元格,浅谈openpyxl库,遇到批量合并单元格的问题
我就废话不多说了,大家还是直接看代码吧~ from openpyxl import Workbook from openpyxl import load_workbook from openpyxl. ...
- excel模板合并单元格(jxls 合并单元格)---工具net.sf.jxls扩展---支持合并单元格(无需代码方式合并)
概述 excel比较常用的工具类就是poi和jxl当然后者已经停止维护很久而且只支持excel2003,不支持excel2007. 对2003版,最大行数是65536行 ,对2007以上版本,最大行数 ...
最新文章
- SpringBoot枚举传参
- python判断字母左右两边的大写字母有_python习题,,1.26个字母大小写
- 《研磨设计模式》chap18 状态模式state(1)模式简介
- python中引用计数_Python引用计数操作示例
- [Luogu P2893][USACO08FEB]修路Making the Grade
- Automatic Tumor Segmentation from MRI scans 阅读笔记
- 国内AGV机器人厂家数目统计及区域分布分析
- iOS12完美越狱来了!漫谈iOS12缓解机制
- html5中框架怎么写,html框架布局模板
- Navicat连接失败
- 如何使用adb卸载手机系统内部软件
- 最新emoji表情代码大全_2020最新霜降早上好祝福语动态表情图片大全带字 温馨的霜降问候语免打字图片...
- U盘html文件恢复不了,u盘文件突然不见了怎么恢复?恢复小技巧来了
- keytool 错误: java.io.IOException: Keystore was tampered with, or password was incorrect----gt;解决方法
- php 指纹验证失败,为什么手指沾了水,指纹识别就会失效?液体会导致指纹解锁失败?...
- 西北大学本科毕业论文答辩PPT模板
- OHIF记录(二)——Viewers和React-vtk工具包互联
- 硬盘分区-从其他盘划分容量到c盘
- 嵌入式Linux的内核编译
- Oracle-OGG trail 文件大小引起的进程异常 OGG-01172
热门文章
- matlab分式函数求解,科学网—用MATLAB编写预估-校正法程序求分数阶常微分方程组数值解 - 王福昌的博文...
- 华北电力保定校区计算机专业好就业吗,2021年华北电力大学(保定)专业排行榜,哪个专业就业比较好...
- 一元二次方程极简新解法
- oracle 物化视图 on demand,【案例】Oracle物化视图 on prebuilt table故障常见解决办法...
- hang计算机术语大全,行业英语学习
- 离线强化学习-4 DP-based方法
- matlab求两向量夹角_matlab入门练习
- Unity 实现两个向量夹角为0~360度
- 计算机算单元格个数,罕见知识点–Excel 参数这样用,才能算出区域内文本单元格的数量...
- 基于PT100铂电阻的高精度测温方法