table組件动态表头分组

对于动态表头分组，你可以使用 Ant Design 的 Table 组件来实现。以下是一个示例代码，展示了如何在 Ant Design 的 Table 组件中实现动态的表头分组：

import React from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: 'Group A',
    children: [
      {
        title: 'A1',
        dataIndex: 'a1',
        key: 'a1',
      },
      {
        title: 'A2',
        dataIndex: 'a2',
        key: 'a2',
      },
    ],
  },
  {
    title: 'Group B',
    children: [
      {
        title: 'B1',
        dataIndex: 'b1',
        key: 'b1',
      },
      {
        title: 'B2',
        dataIndex: 'b2',
        key: 'b2',
      },
    ],
  },
];

const data = [
  {
    key: '1',
    a1: 'Data A1',
    a2: 'Data A2',
    b1: 'Data B1',
    b2: 'Data B2',
  },
  // 其他数据...
];

const DynamicGroupedTable = () => {
  return <Table columns={columns} dataSource={data} />;
};

export default DynamicGroupedTable;

在上面的示例中，我们定义了 `columns` 数组来描述表头的结构，每个表头可以包含多个子列。通过设置不同的 `title` 和 `dataIndex`，你可以实现动态的表头分组。然后，将 `columns` 数组和数据源 `data` 传递给 `Table` 组件，即可渲染出表格。你可以根据自己的需求修改 `columns` 和 `data` 数组来适配你的业务场景。