antd表格嵌套表格

Ant Design的表格组件支持嵌套表格的展示，可以通过使用Expandable API实现。具体步骤如下：

1. 在columns数组中添加需要嵌套的子表格列，设置render函数返回子表格组件。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) =>
      <a onClick={() => showSubTable(record)}>Show SubTable</a>
  },
];

const subTableColumns = [
  {
    title: 'SubTable Name',
    dataIndex: 'subName',
    key: 'subName',
  },
  {
    title: 'SubTable Age',
    dataIndex: 'subAge',
    key: 'subAge',
  },
  {
    title: 'SubTable Address',
    dataIndex: 'subAddress',
    key: 'subAddress',
  },
];

2. 在Table组件中设置Expandable属性，设置嵌套子表格的render函数。

const [subTableData, setSubTableData] = useState([]);

const showSubTable = (record) => {
  setSubTableData(record.subTableData);
};

<Table
  columns={columns}
  dataSource={data}
  expandable={{
    expandedRowRender: (record) =>
      <Table columns={subTableColumns} dataSource={subTableData} />,
  }}
/>

这样就可以在表格中展示嵌套的子表格了。