ant design vue多样化表格，合并单元格，数据必须以行遍历

Posted 2023-04-27

参考技术A 话不多说，源码奉上，效果如上图所示

表格：
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不计算 索引的 ！
3、methods 方法里面实现 rowSpan
1、 注意 这里 key 是传值 声明方法的时候可以后写
2、使用的时候 在 mounted 里面调用即可
4、customRender 实现合并

Ant Design中Table动态获取数据合并单元格问题

参考技术A ant中table动态添加的数据在不能改变表头的情况下对于一部分单元格合并比较难搞，如下

ps：请求拿到的数据是每条都有信息
我需要将相同的商家名称、联系人、及联系电话合并为一条对应后续数据

ps：下图为我想要的格式

表头固定导致对数据再无法进行处理，所以只能在渲染的角度去解决可以参考ant官网table中customRender

customRender方法有三个参数，value为当前行渲染的值，row为本行渲染的所有数据，index为行索引

对当前表头下的值进行筛选，判断重复值，并进行记录，接下来就是合并操作了

假设从第一行开始需要合并两行，我们判断索引值index==0时，rowSpan == 2，注意了这里比较重要的一步操作，我们需要将合并后的行数rowSpan值改为0（index == 1时，rowSpan==0），如果合并3行，则索引index为2时，也需要将rowSpan值归0。

ps：以上仅为个人理解，如有写的不正确的地方欢迎各位大佬批评指正！