基于 Antd Table 组件组件的二次封装，使其支持同列相同数据下的合并

621 字

3 分钟

基于 Antd Table 组件组件的二次封装，使其支持同列相同数据下的合并

2025-09-10

前端

组件封装

背景#

最近在进行业务开发时，经常遇到同列相同数据下的合并，为了方便后续使用，我封装了一个基于 Antd Table 组件的二次封装，可以方便的实现同列相同数据下的合并

同列相同数据下的合并

实现思路#

Antd Table 组件的 Column 描述列描述对象中 onCell 属性可以用来设置单元格的样式，因此我们只需要在 onCell 属性中设置合并单元格 rowSpan 值即可。

简单介绍下 rowSpan 属性，rowSpan 属性用来设置单元格的跨行数，如果设置为 2，则表示单元格跨两行。同时需要将被合并的单元格的 rowSpan 值设置为 0，来避免被合并的单元格被显示。

实现代码#

1
import { useMemo } from 'react'
2
import { Table, TableProps } from 'antd'
3

4
export default function SameGroupMergeTable(props: TableProps) {
5
  const { columns, dataSource } = props;
6

7
  const innerColumns = useMemo(() => {
8
    if (!columns || !dataSource) return [];
9
    return columns.map((column: any) => {
10
      if (column.mergeColumn && !column.onCell) {
11
        return {
12
          ...column,
13
          onCell: (record: any, rowIndex: number | undefined) => {
14
            const dataIndex = column.dataIndex;
15
            const sameKey = dataSource.filter((item) => item[dataIndex] === record[dataIndex]);
16
            if (sameKey.length === 1) {
17
              return { rowSpan: 1 };
18
            }
19
            const sameKeyFirstIndex = dataSource.findIndex((item) => item[dataIndex] === record[dataIndex]);
20
            if (rowIndex === sameKeyFirstIndex) {
21
              return { rowSpan: sameKey.length };
22
            }
23
            return { rowSpan: 0 };
24
          },
25
        };
26
      }
27
      // 如果 column 中设置了 mergeColumn 和 onCell 属性，则需要重写 onCell 属性，因为可能需要用到 onCell 属性中的其他参数实现其他功能
28
      if (column.mergeColumn && column.onCell) {
29
        return {
30
          ...column,
31
          // 重写 onCell, 给 onCell 传递一个参数，合并单元格的值（rowSpan）
32
          onCell: (record: any, rowIndex: number | undefined) => {
33
            const dataIndex = column.dataIndex;
34
            const sameKey = dataSource.filter((item) => item[dataIndex] === record[dataIndex]);
35
            if (sameKey.length === 1) {
36
              return column.onCell(record, rowIndex, { rowSpan: 1 });
37
            }
38
            const sameKeyFirstIndex = dataSource.findIndex((item) => item[dataIndex] === record[dataIndex]);
39
            if (rowIndex === sameKeyFirstIndex) {
40
              return column.onCell(record, rowIndex, { rowSpan: sameKey.length });
41
            }
42
            return column.onCell(record, rowIndex, { rowSpan: 0 });
43
          },
44
        };
45
      }
46
      return column;
47
    });
48
  }, [columns, dataSource]);
49

50
  return (
51
    <Table {...props} columns={innerColumns} />
52
  )
53
}

使用方式#

1
import SameGroupMergeTable from '@/src/components/SameGroupMergeTable';
2

3
const columns = [
4
  {
5
    title: 'Name',
6
    dataIndex: 'name',
7
    // 使用方式一：设置 mergeColumn 属性
8
    mergeColumn: true,
9
  },
10
  {
11
    title: 'Name',
12
    dataIndex: 'name',
13
    // 使用方式二：设置 mergeColumn 和 onCell 属性
14
    mergeColumn: true,
15
    onCell: (_record, rowIndex, mergeObject) => {
16
      if (rowIndex === 0) {
17
        return {
18
          ...mergeObject,
19
          style: {
20
            backgroundColor: "#E6F4FF",
21
          }
22
        }
23
      }
24
      return mergeObject;
25
    },
26
  },
27
];
28
const dataSource = [];
29
const Example = () => {
30
  return <SameGroupMergeTable
31
    columns={columns}
32
    dataSource={dataSource}
33
  />;
34
};
35

36
export default Example;