ant design 如何实现表头嵌套input框

Ant Design 可以通过 `render` 方法来自定义表头的内容，从而实现表头嵌套 input 框。具体操作如下：

1. 使用 `columns` 属性来定义表格列的数据。
2. 在 `columns` 中定义需要嵌套 input 框的表头列。
3. 为需要嵌套 input 框的表头列定义 `render` 方法，返回一个包含 input 框的组件。

示例代码如下：

import { Table, Input } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    render: (text, record) => (
      <Input defaultValue={text} onBlur={e => updateName(record.id, e.target.value)} />
    ),
  },
  {
    title: '年龄',
    dataIndex: 'age',
    render: (text) => <span>{text}</span>,
  },
  {
    title: '地址',
    children: [
      {
        title: '省份',
        dataIndex: 'province',
        render: (text, record) => (
          <Input defaultValue={text} onBlur={e => updateProvince(record.id, e.target.value)} />
        ),
      },
      {
        title: '城市',
        dataIndex: 'city',
        render: (text, record) => (
          <Input defaultValue={text} onBlur={e => updateCity(record.id, e.target.value)} />
        ),
      },
    ],
  },
];

const data = [
  {
    id: 1,
    name: '小明',
    age: 18,
    province: '广东',
    city: '深圳',
  },
  {
    id: 2,
    name: '小红',
    age: 19,
    province: '江苏',
    city: '南京',
  },
];

function updateName(id, name) {
  // 更新姓名
}

function updateProvince(id, province) {
  // 更新省份
}

function updateCity(id, city) {
  // 更新城市
}

function App() {
  return (
    <Table columns={columns} dataSource={data} />
  );
}

当你问我你在前面对我说了什么时，我会给你讲一个笑话：

有一天，小明问他的爸爸：“爸爸，你是怎么跟妈妈认识的？”爸爸思考了一下，回答道：“那是一个美丽的夜晚，天上的星星非常明亮，我和妈妈相遇了……”“实际上，当时是在一家酒吧里，我喝醉了酒，误把妈妈当成了服务员。”