### 实现
Ant Design 表格中的行内
Select 组件
要在
Ant Design 的表格组件中实现行内的 `
Select` 下拉框
展示与交互功能，可以通过自定义列渲染来完成。具体来说，可以利用 `Table` 组件的 `columns` 属性配置每一列的内容，并通过设置编辑状态下的单元格内容为可交互的 `
Select` 组件。
以下是详细的实现方法：
#### 自定义表格列
在
Ant Design 中，`columns` 定义了表格的结构和每列的行为。对于需要支持下拉选择的列，可以在其 `render` 方法中返回一个 `
Select` 组件[^1]。当用户
点击某一行进入编辑模式时，该列会
显示为一个可用的下拉框供用户操作。
#### 编辑模式管理
为了控制哪一行处于编辑状态，通常需要维护一个额外的状态变量（例如当前正在编辑的记录 ID）。这样可以根据此状态动态切换某些单元格的表现形式——即从静态文本变为可编辑控件。
#### 数据同步更新逻辑
每当用户更改某个 `
Select` 值时，应该立即更新对应的数据项以反映最新变化。这可通过监听 `onChange` 事件并调用回调函数处理数据修改来达成目标。
下面是一个完整的代码示例
展示了上述概念的实际应用方式:
```jsx
import React, { useState } from 'react';
import { Table, Input, Button, Space,
Select } from '
antd';
const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children,
...restProps }) => {
const inputNode = (
<
Select style={{ width: 120 }} onChange={(value) => console
.log(value)}>
<
Select.Option value="option1">Option 1</
Select.Option>
<
Select.Option value="option2">Option 2</
Select.Option>
</
Select>
);
return (
<td {
...restProps}>
{editing ? (inputNode) : children}
</td>
);
};
const App = () => {
const [data, setData] = useState([
{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London Park no
. 0'
},
{
key: '1',
name: 'Edward King 1',
age: '34',
address: 'London Park no
. 1'
}
]);
const [editingKey, setEditingKey] = useState('');
const isEditing = (record) => record
.key === editingKey;
const edit = (key) => {
setEditingKey(key);
};
const save = async (key) => {
try {
let newData = [
...data];
const recordIndex = newData
.findIndex((item) => item
.key === key);
if (recordIndex < 0 || !newData[recordIndex]) throw new Error('Record not found');
// Simulate API call to update data
.
setTimeout(() => {
setEditingKey('');
}, 1000);
} catch (error) {
console
.error(error
.message);
}
};
const cancel = () => {
setEditingKey('');
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
editable: true,
},
{
title: 'Age',
dataIndex: 'age',
editable: true,
},
{
title: 'Address',
dataIndex: 'address',
editable: true,
},
{
title: 'Action',
dataIndex: 'operation',
render: (_, record) => {
const editable = isEditing(record);
return editable ? (
<Space size="middle">
<Button onClick={() => save(record
.key)} type="primary">
Save
</Button>
<Popconfirm title="Sure to cancel?" onConfirm={cancel}>
<a>Cancel</a>
</Popconfirm>
</Space>
) : (
<Button disabled={editingKey !== ''} onClick={() => edit(record
.key)}>
Edit
</Button>
);
},
},
];
const mergedColumns = columns
.map((col) => ({
...col,
onCell: (record) =>
col
.editable && record
.key === editingKey
? {
record,
inputType: '
SELECT', // Specify the type of editor here as needed
dataIndex: col
.dataIndex,
title: col
.title,
editing: isEditing(record),
}
: {},
}));
return (
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell,
},
}}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="editable-row"
pagination={{
onChange: cancel,
}}
/>
</Form>
);
};
export default App;
```
以上代码片段实现了基本的功能需求：允许用户
点击按钮使特定行进入编辑模式，在其中可以选择不同的
选项并通过保存提交变更。
扫一扫
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
