antd的嵌套表格如何实现不嵌套

如果你想要实现antd的嵌套表格，而不是嵌套，可以使用antd提供的Table组件的expandable属性。

首先，你需要在columns数组中添加一个expandable属性来定义展开行的内容，例如：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '操作',
    key: 'operation',
    render: (text, record) => (
      <span>
        <a>编辑</a>
        <Divider type="vertical" />
        <a>删除</a>
      </span>
    )
  }
];

const data = [
  {
    key: '1',
    name: '张三',
    age: 32,
    children: [
      {
        key: '1-1',
        name: '张三的儿子',
        age: 12
      },
      {
        key: '1-2',
        name: '张三的女儿',
        age: 8
      }
    ]
  },
  {
    key: '2',
    name: '李四',
    age: 25,
    children: [
      {
        key: '2-1',
        name: '李四的儿子',
        age: 3
      }
    ]
  }
];

然后，在Table组件中添加expandable属性，并设置expandedRowRender属性为一个函数，用于定义展开行的内容：

<Table
  columns={columns}
  dataSource={data}
  expandable={{
    expandedRowRender: record => (
      <p style={{ margin: 0 }}>{`子级：${record.children.map(child => child.name).join(', ')}`}</p>
    )
  }}
/>

这样，你就可以实现不嵌套的antd表格了。