react + ant design 实现动态合并Table表格（相同数据合并为一条）

一、首先来看看需求，主要就是一个表格的合并

这里是官方文档给出的关于合并的方法

表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

根据他给出的demo可以看出是要合并的第一个数据设置他的colSpan ，而后边不展示的数据给他设置colSpan /rowSpan 为0 就可以，但是这样子的话，根据后端返回的不确定数据就好像有点不好整了是吧（要是后端能直接给你合并的格数，不展示的通过一个啥字段标记一下可能也行，或许有更好的方案，各位大佬评论区指出吧）。

但是，我们可以结合数组的filter() 方法试试，这玩意不是可以筛选符合条件的数据嘛，让他来返回相同的数据没毛病吧。

二、主要代码：

{title: 'GPS号',dataIndex: 'gpsNumber',key: 'gpsNumber',align: 'center',render: (value, record, index) => {const obj = {children: value,props: {},};let arr = this.state.tableListTest.filter((res) => {//这里gpsNumber是我需要判断的字段名（相同就合并）return res.gpsNumber == record.gpsNumber;});if (index == 0 || this.state.tableListTest[index - 1].gpsNumber != record.gpsNumber) {obj.props.rowSpan = arr.length;} else {obj.props.rowSpan = 0;}return obj;},},

三、我这里的部分数据

四、最终的效果

这里的表头也是有一个合并的效果的，官方文档有给出方案：

react + ant design 实现动态合并Table表格（相同数据合并为一条）相关推荐

React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
把计算机知识列表合为一列,怎么把相同表格的数据合并
1. 在EXCEL表格里面怎么把相同名称的不同数据合并到一起 1.Excel打开文档. 2.Excel打开文档后,点击插入数据透视表. 3.点击插入数据透视表后,选中区域中就框选数据,然后选择一个要放 ...
jQuery实现table表格中行数据上下拖拽功能
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({cursor: "move",axis: "y&quo ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
06 - table表格标签+ 行合并+列合并
1.table 表格标签属性在小程序中查看 cellspacing="0" 表格边框合并: 表格:table 行:tr 列:td 属性: ...