React antd Table组件动态合并单元格(合并行)代码实现

最新推荐文章于 2025-04-14 16:37:02 发布
最新推荐文章于 2025-04-14 16:37:02 发布
阅读量2k 收藏 3
点赞数 3
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_71630007/article/details/130131124
版权
本文介绍了如何在React应用中使用Ant Design Table组件实现动态合并行的效果。通过将树形数据扁平化，然后根据数据特性计算并合并一级和二级单元格。具体实现逻辑包括：依据第一列唯一值计算重复次数以确定一级合并行数，以及结合第一列和第二列创建唯一标识进行二级合并行的计算。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

要实现的表格样子如下：

分成三级表格，第一列和最后一列是一级合并，第二列和第五列是二级合并， 第三列和第四列不需要合并。

实现的逻辑是：

先把树形数据扁平化，然后把扁平化之后的数据进行渲染表格

 接下来就要计算要合并多少行，第一列的数据是可以确定是唯一的，所以直接计算该字段的值有多少次重复的次数，有几次重复就要合并多少行，第二列的数据不能确定是唯一的，所以要对第二列数据进行转换一下，可以拼接一下第一列和第二列的数据就可以确定是唯一，然后同理，计算重复的次数，累计起来进行合并行。

      <Table
        bordered
        rowKey={'id'}
        columns={columns}
        dataSource={treeData}
      />
const columns = [
    {
        title: '第一列',
        dataIndex: 'firstColumn',
        key: 
最低0.47元/天 解锁文章
沐沐sakura
关注
Antd Table 分页条件下的动态数据合并单元格
是谢添啊
10-14 1835
本文介绍 Ant Design Vue 的 a-table 表格组件如何在分页条件下的对动态数据合并单元格。我们希望进行行合并，即将相同日期和相同店铺列的行单元格分别进行行合并。由于数据量可能会很大，因此需要进行分页处理。**在分页情况下，我们进行的行合并其实只需要考虑这一页的记录即可，也就是将这一页的所有记录中相同日期和相同店铺列的行单元格分别进行行合并。**
react使用antd组件合并Table单元格
wx258852的博客
12-06 1279
初始化合并单元格，必须对应projectnameRowSpan行名称重新组合方法。行数据可编辑方法，总数据编辑。
antd中table实现动态单元格合并
weixin_46103180的博客
03-23 1326
最近项目使用的antd中的table，需求中也有需要对表格进行合并，在这之前发不过去elementUi的table合并单元格，其实大致思路是差不多的，只是稍微有些区别，话不多说直接上代码教大家!其实原理就是取第一行数据为基准，与他的下一行数据进行对比，相同则合并数加1，不相同则合并数就默认为1。红色部分是我合并的区域。
Ant Design Vue 表格复杂数据合并单元格
最新发布
qq_42822849的博客
04-14 1103
表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
antd Table 动态数据 合并单元格（合并行）
芝芝为荔枝
01-06 9955
最近处理table的时候 遇到了要合并同一列的几行的情况，比如第一列的前面三行都是同一个对象的名字，此时合并显示比较妥当，但是数据是后端接口来的，而且可以筛选条件，搜索出来的数据就是动态的长度，可能这次需要合并前面的五行， 在原有的静态数据的合并的基础上，需要加上一个合并的逻辑代码。，遇到需要合并的行，设置rowSpan的数量为需要合并的行总数，然后把后面的rowSpan设置为0（不渲染该位置），否则这个表格就会乱套。下面就是我们合并了 ‘分类’ 列下面的 【1,2】行 ，【4,5,6】 行。
react结合antd的Table组件实现动态单元格合并
qq_52845451的博客
02-19 4009
react结合antd的Table组件实现动态单元格合并
antd table合并行或者列（动态添加合并行、列）
见贤思齐焉，见不贤内自省
02-25 1万+
antd table合并行或者列（动态添加合并行、列）
前端-antd 动态合并单元格
一如既往的准备文章
03-29 579
背景：前端涉及具有相同数据源且相邻行，进行 行合并的需求时，需要动态合并单元格。中对列进行渲染，调用。
详解React中合并单元格的正确写法
01-21
用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, {...
antdTable动态合并单元格
qq_41466219的博客
03-04 1322
import React from 'react' import { Table, Card, Row, Col, } from 'antd' import './index.css' function mergeCells(text, data, key, index) { if (index !== 0 && text === data[index - 1][key]) { return 0 } let rowSpan = 1 for (let i = i
antd table合并复杂单元格、分组合并行、分组合并列、动态渲染列、嵌套表头
一枚不断学习的小码农一枚~
10-12 1877
项目里遇到个需求，涉及到比较复杂的单元格合并 、嵌套表头、分组合并行、合并列等，并且数据列还是动态渲染的
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex:
动态合并单元格
01-08
用JS动态合并单元格算法，<%--利用一个结果集List<Bean>来生成，数据过多会加重客户断负担 --%> <c:if test="${status.index>=tempEnd}"> <c:set var="rowspanCount" value="0"></c:set><%--清楚历史数据 --%> <c:forEach var="item2" items="${list}" varStatus="status2"> <%-- tablename指要合并的属性 --%> <c:if test="${accountConfig.tablename==item2.tablename}"> <c:set var="tempFrist" value="${status.index }"></c:set> <c:set var="rowspanCount" value="${rowspanCount+1 }"></c:set> <c:set var="tempEnd" value="${tempFrist+rowspanCount }"></c:set> </c:if> </c:forEach> </c:if> <%-- tablename指要合并的属性 --%> <c:if test="${status.index==tempFrist}"> <td rowspan="${rowspanCount}"> ${accountConfig.tablename} </td> </c:if>
antd table 合并相邻相同单元格数据
MFWSCQ的博客
03-31 3587
表头只支持列合
React antd Table表格动态合并单元格
m0_63788547的博客
08-23 672
React antd Table表格动态合并单元格
antd动态合并单元格
qq_42551474的博客
03-19 1239
antd动态合并单元格antd合并单元格的方法动态合并 antd的表格文档中，介绍的合并单元格，介绍的很少，因此动态合并单元格是很麻烦的。 antd合并单元格的方法 在antd表格中，她是将你想合并的单元格的第一个单元格的rowSpan设置你需要单元格的大小，然后这个单元格下面的格子的rowSpan设置成0的方式实现的. 动态合并 动态合并的话是跟后台数据对接的，想要合并的数据一定要后台做好排序才...
Antd合并
yezitoo的博客
05-24 293
let group_row_span = []; let x = ''; let count = 0; let start_index = 0; for (let index = 0; index < data.group.length; index++) { const ele = data.group[index].exec_target; if (in...
antd Table 组件动态合并单元格
热门推荐
杏子
08-28 1万+
使用 antd 开发 PC端应用的人肯定知道的 Table 组件。一个功能很完善，界面很优化的表格组件。通过查阅官方文档，你可以很轻松地使用这个组件。但是如果表格中涉及到合并单元格昵？
antd 合并单元格
weixin_44320857的博客
09-10 234
data中定义的列数据 columns3: [ { title: 'Department', dataIndex: 'department', width: '7%', align: 'center', customRender: (value, row, index) => { const obj = { children: value,
react Antd Table 组件 修改表格内的横向的边框色
06-07
您可以通过自定义CSS来修改Antd Table组件中表格内的横向边框颜色。以下是示例代码： ```css .ant-table-tbody > tr > td { border-top: 1px solid #1890ff; /* 修改表格内横向边框颜色为蓝色 */ } ``` 您可以将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值