vue 可合并表格组件_vue实现表格合并功能

本文实例为大家分享了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 }}{