el-table 相同行合并

138 阅读1分钟

需要实现的效果

image.png

实现

根据官方文档的描述可知,想要实现上述的效果,我们可以通过设置每一个 cellrowspancolspan来完成,如要实现4行合并,需要设置第一行的rowspan4,剩余三行的rowspan设置为0
所以我们需要一个数据可以表示,每一行每一列所占的 span 数量。
上图中的表格需要的数据如下

// 因为列不需要合并,所以只展示了所占的行数
4   4   4   1   4   4   4   4   8
0   0   0   1   0   0   0   0   0
0   0   0   1   0   0   0   0   0
0   0   0   1   0   0   0   0   0
4   4   4   1   4   4   4   4   0
0   0   0   1   0   0   0   0   0
0   0   0   1   0   0   0   0   0
0   0   0   1   0   0   0   0   0

接下来只要遍历数组 获取到这种数据即可

代码