antd表格嵌套表格

Ant Design 的表格组件支持嵌套表格，可以通过 `expandedRowRender` 属性实现。具体实现步骤如下：

1. 在表格的 `columns` 中添加一个空列，用于展开子表格的图标。

const columns = [
  {
    title: '',
    dataIndex: 'expandIcon',
    width: 50,
    render: (_, record) =>
      record.children ? (
        <CaretDownOutlined style={{ cursor: 'pointer' }} />
      ) : null,
  },
  // 其他列
];

2. 在父表格中设置 `expandedRowRender` 属性，用于渲染子表格。

const expandedRowRender = (record) => {
  const childColumns = [
    // 子表格的列
  ];

  return (
    <Table
      columns={childColumns}
      dataSource={record.children}
      pagination={false}
      size="small"
    />
  );
};

<Table
  columns={columns}
  dataSource={data}
  expandedRowRender={expandedRowRender}
/>

3. 在 `dataSource` 中为需要展开子表格的行添加 `children` 属性，值为子表格的数据源。

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    children: [
      {
        key: '1-1',
        name: 'Lucy Brown',
        age: 18,
      },
      {
        key: '1-2',
        name: 'Tom Brown',
        age: 16,
      },
    ],
  },
  // 其他行
];

这样就可以实现嵌套表格的效果了。需要注意的是，父表格和子表格的列数要对应，不然会出现布局错乱的情况。