实现基于React和Ant Design的表格行自由合并与拆分-JXin的博客

温馨提示

该文章距离上次更新已经过去了 446 天，文章内容可能已经过时。

效果图
数据格式
代码实现
- 行拆分
- 修改默认表格样式
完整代码

效果图

实现基于React和Ant Design的表格行自由合并与拆分

数据格式

const dataSource = [
	{
		code: 0,
		name: '汽车',
		sort: ['大众', '本田', '奥迪', '宝马'],
		num: [10, 20, 30 ,40],
		total: 100
	},
	{
		code: 1,
		name: '水果',
		sort: ['香蕉', '苹果', '梨子'],
		num: [33, 23, 32],
		total: 88
	}
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在一个数组中有多个分类，分类下还有多个子项

代码实现

行拆分

render: (_, record) => {
	return <Space direction="vertical" size={0} style={{ width: '100%' }}>
		{
			record.num.map((item, index) => {
				return (
					<>
						<div style={{padding: '0 16px'}}>
							<span>{item}</span>
						</div>
						{index !== record.num.length - 1 && <Divider style={{ margin: '8px 0' }} />}
					</>
				)
			})
		}
	</Space>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在 columns 的子项和数量 render 中的，遍历每一行数据，通过 Divider分割线 来模拟每一个格子，之后使用 Space间距 将排列方向改为纵向排列，然后根据自己的需要，修改一下每个格子之间的间距

实现基于React和Ant Design的表格行自由合并与拆分

到这里就能得到这样一个表格，但是会发现一个问题，每一个遍历的格子两边都有间距，这是因为antd设置了表格的td默认padding为16px

修改默认表格样式

要修改表格默认padding，可以使用 onCell 设置单元格样式，将 padding-left 和 padding-right 设置为0

{
	title: '子类',
	align: 'center',
	onCell: () => ({ style: { paddingLeft: 0, paddingRight: 0 }}),
	render: (_, record) => {
		return <Space direction="vertical" size={0} style={{ width: '100%' }}>
			{
				record.sort.map((item, index) => {
					return (
						<>
							<div style={{padding: '0 16px'}}>
								<span>{item}</span>
							</div>
							{index !== record.sort.length - 1 && <Divider style={{ margin: '8px 0' }} />}
						</>
					)
				})
			}
		</Space>
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这样对应的列就不会有默认的左右间距了

完整代码

import React from 'react';
import { Table, Space, Divider } from 'antd'
import type { TableProps } from 'antd';

interface DataType {
  code: number;
  name: string;
  sort: string[];
  num: number[];
}

function App() {
  const dataSource = [
    {
      code: 0,
      name: '汽车',
      sort: ['大众', '本田', '奥迪', '宝马'],
      num: [10, 20, 30 ,40],
      total: 100
    },
    {
      code: 1,
      name: '水果',
      sort: ['香蕉', '苹果', '梨子'],
      num: [33, 23, 32],
      total: 88
    }
  ]

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'code'
    },
    {
      title: '类别',
      align: 'center',
      dataIndex: 'name'
    },
    {
      title: '子类',
      align: 'center',
      onCell: () => ({ style: { paddingLeft: 0, paddingRight: 0 }}),
      render: (_, record) => {
        return <Space direction="vertical" size={0} style={{ width: '100%' }}>
          {
            record.sort.map((item, index) => {
              return (
                <>
                  <div style={{padding: '0 16px'}}>
                    <span>{item}</span>
                  </div>
                  {index !== record.sort.length - 1 && <Divider style={{ margin: '8px 0' }} />}
                </>
              )
            })
          }
        </Space>
      }
    },
    {
      title: '数量',
      align: 'center',
      onCell: () => ({ style: { paddingLeft: 0, paddingRight: 0 }}),
      render: (_, record) => {
        return <Space direction="vertical" size={0} style={{ width: '100%' }}>
          {
            record.num.map((item, index) => {
              return (
                <>
                  <div style={{padding: '0 16px'}}>
                    <span>{item}</span>
                  </div>
                  {index !== record.num.length - 1 && <Divider style={{ margin: '8px 0' }} />}
                </>
              )
            })
          }
        </Space>
      }
    },
    {
      title: '总数',
      align: 'center',
      dataIndex: 'total',
    }
  ]
  return (
    <Table bordered pagination={false} dataSource={dataSource} columns={columns} style={{width: '800px', margin: '20px auto'}}></Table>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94