Ant Design 表格中插入下拉选择框 - 代码示例

Ant Design 表格中插入下拉选择框 - 代码示例

在 Ant Design 中，您可以使用 Select 组件来实现下拉选择框。以下是将下拉选择框插入表格的代码示例：

import { Table, Select } from 'antd';

const { Option } = Select;

const dataSource = [
  {
    key: '1',
    name: 'John',
    age: 32,
    gender: 'Male',
  },
  {
    key: '2',
    name: 'Jane',
    age: 28,
    gender: 'Female',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    key: 'gender',
    render: (text, record) => (
      <Select defaultValue={text} style={{ width: 120 }} onChange={value => handleGenderChange(value, record.key)}>
        <Option value='Male'>Male</Option>
        <Option value='Female'>Female</Option>
      </Select>
    ),
  },
];

const handleGenderChange = (value, key) => {
  // 在这里处理性别选择的变化
  console.log(value, key);
};

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

export default MyTable;

解释：

• 在 render 方法中，我们使用 Select 组件作为返回值，将下拉选择框显示在表格中。
• defaultValue 属性用来设置默认值，初始显示选中 gender 字段的值。
• onChange 属性用来监听选择的变化，当选择发生变化时，会触发 handleGenderChange 函数。
• handleGenderChange 函数接收选择的 value 和 record.key 作为参数，您可以在这里处理选择的变化。

注意：

• 确保您已经安装并引入了 Ant Design 的 Select 组件。
• 示例中使用的是 Ant Design v4 版本。

通过以上代码，您可以在 Ant Design 表格中成功插入下拉选择框，并实现选择变化的监听和处理。