可以使用
antd中的
Select组件和Table
组件来实现这个
功能。具体步骤如下：
1. 在Table
组件中
添加一个列，该列包含
Select组件。可以使用Table
组件的render属性来渲染该列。
2. 在
Select组件中设置数据源，可以通过props传递数据源，也可以在
组件内部设置。数据源通常是一个数组，每个数组元素都代表一个选项。
3. 在
Select组件中设置选中项。可以使用props传递选中项，也可以在
组件内部设置。选中项通常是一个值或者一个数组，表示当前选中的选项。
4. 在
Select组件中设置事件处理函数。可以使用props传递事件处理函数，也可以在
组件内部设置。事件处理函数通常是一个回调函数，当用户选中某个选项时会被调用。
示例代码如下：
```jsx
import { Table,
Select } from '
antd';
const { Option } =
Select;
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
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) => (
<
Select defaultValue="1" style={{ width: 120 }}>
<Option value="1">Option 1</Option>
<Option value="2">Option 2</Option>
<Option value="3">Option 3</Option>
</
Select>
),
},
];
const App = () => {
return (
<Table dataSource={dataSource} columns={columns} />
);
};
export default App;
```
在上述代码中，我们在Table
组件的columns属性中
添加了一个名为Action的列，该列包含了一个
Select组件。我们在
Select组件中设置了数据源和事件处理函数，用户选择某个选项时会触发onChange事件，我们在事件处理函数中可以获取到用户选择的选项。
1347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
