2016-11-21 11:29:55 +08:00
|
|
|
|
---
|
2019-11-15 14:35:25 +08:00
|
|
|
|
order: 24
|
2016-11-21 11:29:55 +08:00
|
|
|
|
title:
|
|
|
|
|
en-US: Editable Rows
|
|
|
|
|
zh-CN: 可编辑行
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
|
|
带行编辑功能的表格。
|
|
|
|
|
|
2021-03-06 15:50:14 +08:00
|
|
|
|
> 🛎️ 想要 3 分钟实现?试试 [ProTable 的可编辑表格](https://procomponents.ant.design/components/editable-table)!
|
2020-11-27 18:29:21 +08:00
|
|
|
|
|
2016-11-21 11:29:55 +08:00
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
|
|
Table with editable rows.
|
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
```tsx
|
2020-01-22 12:11:49 +08:00
|
|
|
|
import React, { useState } from 'react';
|
2020-12-17 15:09:18 +08:00
|
|
|
|
import { Table, Input, InputNumber, Popconfirm, Form, Typography } from 'antd';
|
2016-11-21 11:29:55 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
interface Item {
|
|
|
|
|
key: string;
|
|
|
|
|
name: string;
|
|
|
|
|
age: number;
|
|
|
|
|
address: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const originData: Item[] = [];
|
2017-11-07 21:02:28 +08:00
|
|
|
|
for (let i = 0; i < 100; i++) {
|
2019-07-03 20:14:39 +08:00
|
|
|
|
originData.push({
|
2017-11-07 21:02:28 +08:00
|
|
|
|
key: i.toString(),
|
|
|
|
|
name: `Edrward ${i}`,
|
|
|
|
|
age: 32,
|
|
|
|
|
address: `London Park no. ${i}`,
|
|
|
|
|
});
|
2016-11-21 11:29:55 +08:00
|
|
|
|
}
|
2020-03-06 12:50:45 +08:00
|
|
|
|
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
2019-07-03 20:14:39 +08:00
|
|
|
|
editing: boolean;
|
|
|
|
|
dataIndex: string;
|
2020-03-06 12:50:45 +08:00
|
|
|
|
title: any;
|
2019-07-03 20:14:39 +08:00
|
|
|
|
inputType: 'number' | 'text';
|
|
|
|
|
record: Item;
|
|
|
|
|
index: number;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}
|
2016-11-21 11:29:55 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
|
|
editing,
|
|
|
|
|
dataIndex,
|
|
|
|
|
title,
|
|
|
|
|
inputType,
|
|
|
|
|
record,
|
|
|
|
|
index,
|
|
|
|
|
children,
|
|
|
|
|
...restProps
|
|
|
|
|
}) => {
|
|
|
|
|
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<td {...restProps}>
|
|
|
|
|
{editing ? (
|
|
|
|
|
<Form.Item
|
|
|
|
|
name={dataIndex}
|
|
|
|
|
style={{ margin: 0 }}
|
|
|
|
|
rules={[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: `Please Input ${title}!`,
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
{inputNode}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
) : (
|
|
|
|
|
children
|
|
|
|
|
)}
|
|
|
|
|
</td>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
|
const App: React.FC = () => {
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const [form] = Form.useForm();
|
2020-01-22 12:11:49 +08:00
|
|
|
|
const [data, setData] = useState(originData);
|
|
|
|
|
const [editingKey, setEditingKey] = useState('');
|
2019-07-03 20:14:39 +08:00
|
|
|
|
|
2020-03-06 12:50:45 +08:00
|
|
|
|
const isEditing = (record: Item) => record.key === editingKey;
|
2019-07-03 20:14:39 +08:00
|
|
|
|
|
2020-12-17 15:09:18 +08:00
|
|
|
|
const edit = (record: Partial<Item> & { key: React.Key }) => {
|
2020-04-15 10:39:16 +08:00
|
|
|
|
form.setFieldsValue({ name: '', age: '', address: '', ...record });
|
2019-07-03 20:14:39 +08:00
|
|
|
|
setEditingKey(record.key);
|
2018-05-07 20:50:43 +08:00
|
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const cancel = () => {
|
|
|
|
|
setEditingKey('');
|
2019-05-14 12:16:13 +08:00
|
|
|
|
};
|
|
|
|
|
|
2020-03-06 12:50:45 +08:00
|
|
|
|
const save = async (key: React.Key) => {
|
2019-07-03 20:14:39 +08:00
|
|
|
|
try {
|
2020-03-06 12:50:45 +08:00
|
|
|
|
const row = (await form.validateFields()) as Item;
|
2018-06-27 15:55:04 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const newData = [...data];
|
2018-05-07 20:50:43 +08:00
|
|
|
|
const index = newData.findIndex(item => key === item.key);
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
const item = newData[index];
|
|
|
|
|
newData.splice(index, 1, {
|
|
|
|
|
...item,
|
|
|
|
|
...row,
|
|
|
|
|
});
|
2019-07-03 20:14:39 +08:00
|
|
|
|
setData(newData);
|
|
|
|
|
setEditingKey('');
|
2018-05-07 20:50:43 +08:00
|
|
|
|
} else {
|
2018-07-19 11:26:23 +08:00
|
|
|
|
newData.push(row);
|
2019-07-03 20:14:39 +08:00
|
|
|
|
setData(newData);
|
|
|
|
|
setEditingKey('');
|
2018-05-07 20:50:43 +08:00
|
|
|
|
}
|
2019-07-03 20:14:39 +08:00
|
|
|
|
} catch (errInfo) {
|
|
|
|
|
console.log('Validate Failed:', errInfo);
|
|
|
|
|
}
|
|
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: 'name',
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
width: '25%',
|
|
|
|
|
editable: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'age',
|
|
|
|
|
dataIndex: 'age',
|
|
|
|
|
width: '15%',
|
|
|
|
|
editable: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'address',
|
|
|
|
|
dataIndex: 'address',
|
|
|
|
|
width: '40%',
|
|
|
|
|
editable: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: 'operation',
|
|
|
|
|
dataIndex: 'operation',
|
2020-03-06 12:50:45 +08:00
|
|
|
|
render: (_: any, record: Item) => {
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const editable = isEditing(record);
|
|
|
|
|
return editable ? (
|
|
|
|
|
<span>
|
2021-11-26 12:18:21 +08:00
|
|
|
|
<Typography.Link onClick={() => save(record.key)} style={{ marginRight: 8 }}>
|
2019-07-03 20:14:39 +08:00
|
|
|
|
Save
|
2021-11-26 12:18:21 +08:00
|
|
|
|
</Typography.Link>
|
2020-03-06 12:50:45 +08:00
|
|
|
|
<Popconfirm title="Sure to cancel?" onConfirm={cancel}>
|
2019-07-03 20:14:39 +08:00
|
|
|
|
<a>Cancel</a>
|
|
|
|
|
</Popconfirm>
|
|
|
|
|
</span>
|
|
|
|
|
) : (
|
2020-12-17 15:09:18 +08:00
|
|
|
|
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
|
2019-07-03 20:14:39 +08:00
|
|
|
|
Edit
|
2020-12-17 15:09:18 +08:00
|
|
|
|
</Typography.Link>
|
2019-07-03 20:14:39 +08:00
|
|
|
|
);
|
2018-05-07 20:50:43 +08:00
|
|
|
|
},
|
2019-07-03 20:14:39 +08:00
|
|
|
|
},
|
|
|
|
|
];
|
2018-05-07 20:50:43 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
const mergedColumns = columns.map(col => {
|
|
|
|
|
if (!col.editable) {
|
|
|
|
|
return col;
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
...col,
|
2020-03-06 12:50:45 +08:00
|
|
|
|
onCell: (record: Item) => ({
|
2019-07-03 20:14:39 +08:00
|
|
|
|
record,
|
|
|
|
|
inputType: col.dataIndex === 'age' ? 'number' : 'text',
|
|
|
|
|
dataIndex: col.dataIndex,
|
|
|
|
|
title: col.title,
|
|
|
|
|
editing: isEditing(record),
|
|
|
|
|
}),
|
|
|
|
|
};
|
|
|
|
|
});
|
2019-03-18 15:28:42 +08:00
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
|
return (
|
|
|
|
|
<Form form={form} component={false}>
|
|
|
|
|
<Table
|
2020-03-06 12:50:45 +08:00
|
|
|
|
components={{
|
|
|
|
|
body: {
|
|
|
|
|
cell: EditableCell,
|
|
|
|
|
},
|
|
|
|
|
}}
|
2019-07-03 20:14:39 +08:00
|
|
|
|
bordered
|
|
|
|
|
dataSource={data}
|
|
|
|
|
columns={mergedColumns}
|
|
|
|
|
rowClassName="editable-row"
|
|
|
|
|
pagination={{
|
|
|
|
|
onChange: cancel,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Form>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
|
export default App;
|
2018-05-07 20:50:43 +08:00
|
|
|
|
```
|
2016-11-21 11:29:55 +08:00
|
|
|
|
|
2018-05-07 20:50:43 +08:00
|
|
|
|
```css
|
2020-06-11 21:18:18 +08:00
|
|
|
|
.editable-row .ant-form-item-explain {
|
2018-05-23 11:32:23 +08:00
|
|
|
|
position: absolute;
|
2020-06-11 21:18:18 +08:00
|
|
|
|
top: 100%;
|
2018-05-23 11:32:23 +08:00
|
|
|
|
font-size: 12px;
|
2016-11-21 11:29:55 +08:00
|
|
|
|
}
|
2018-05-07 20:50:43 +08:00
|
|
|
|
```
|