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

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:以上仅为个人理解,如有写的不正确的地方欢迎各位大佬批评指正!

你可能感兴趣的:(Ant Design中Table动态获取数据合并单元格问题)