React antd Table表格动态归并单元格

注意：
  ① 采用的是React antDsign 4.x版本 
  ② 需重新处理data数据
  实现效果

代码实现

1. import React from 'react';
2. import { Table } from 'antd';
4. const data = [
5.   {
6.     key: '0',
7.     name: '张三',
8.     age: 22,
9.     sex: '男',
10.   },
11.   {
12.     key: '1',
13.     name: '李四',
14.     age: 42,
15.     sex: '男',
16.   },
17.   {
18.     key: '2',
19.     name: '小丽',
20.     age: 22,
21.     sex: '女',
22.   },
23.   {
24.     key: '3',
25.     name: '小红',
26.     age: 31,
27.     sex: '女',
28.   },
29.   {
30.     key: '4',
31.     name: '赵大胆',
32.     age: 42,
33.     sex: '男',
34.   },
35.   {
36.     key: '5',
37.     name: '李建国',
38.     age: 62,
39.     sex: '男',
40.   },
41. ];
43. const columns = [
44.   {
45.     title: '姓名',
46.     dataIndex: 'name',
47.     key: 'name',
48.     align: 'center',
49.   },
50.   {
51.     title: '性别',
52.     dataIndex: 'sex',
53.     key: 'sex',
54.     align: 'center',
55.     render(_, row) {
56.       return {
57.         children: row.sex,
58.         props: {
59.           rowSpan: row.rowSpan,
60.         },
61.       };
62.     },
63.   },
64.   {
65.     title: '年龄',
66.     dataIndex: 'age',
67.     key: 'age',
68.     align: 'center',
69.   },
70. ];
72. //处理data数组
73. const createNewData = (data) => {
74.   return data
75.     .reduce((result, item) => {
76.       if (result.indexOf(item.sex) < 0) {
77.         result.push(item.sex);
78.       }
79.       return result;
80.     }, [])
81.     .reduce((result, sex) => {
82.       const children = data.filter((item) => item.sex === sex);
83.       result = result.concat(
84.         children.map((item, index) => ({
85.           ...item,
86.           rowSpan: index === 0 ? children.length : 0,
87.         })),
88.       );
89.       return result;
90.     }, []);
91. };
93. const App = () => (
94.   <Table
95.     columns={columns}
96.     dataSource={createNewData(data)}
97.     bordered
98.     size="small"
99.   />
100. );
102. export default App;

复制代码

注：本人前端小白 ，如有不对的地方还请多多指教


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。