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

最新推荐文章于 2024-05-16 12:43:50 发布

沐沐sakura

最新推荐文章于 2024-05-16 12:43:50 发布

阅读量1.6k

点赞数 3

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_71630007/article/details/130131124

版权

要实现的表格样子如下：

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

实现的逻辑是：

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

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

      <Table
        bordered
        rowKey={'id'}
        columns={columns}
        dataSource={treeData}
      />

const columns = [
    {
        title: '第一列',
        dataIndex: 'firstColumn',
        key:

关注