本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下
1、背景
本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并。
由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有
数据驱动的框架都有效,比如说Angular和React。最后的实现效果是这样的:
2、思路
原本的正常表格是这样的:
设备工单产品型号计划/实际状态预计生产数
{ { item.equipmentName }}{ { item.doCode}}{ { item.materialCode}}{ { item.productionNum}}{ { item.status}}{ { item.pNum}}先拿正常的表格来做测试,原生的
标签就有rowspan属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none;css控制即可。
因此,每个
标签需要带有两个属性值,rowspan和display来控制每一个单元格的合并行数和是否显示。代码变成这样了设备工单产品型号计划/实际状态预计生产数
{ { item.equipmentName }}{