1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > React antd Table组件动态合并单元格(合并行)代码实现

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

时间:2022-12-19 09:01:00

相关推荐

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

要实现的表格样子如下:

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

实现的逻辑是:

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

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

<TableborderedrowKey={id}columns={columns}dataSource={treeData}/>

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。