mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
72a7ba618f
* chore: update rc-table * add basic table style * checked all logic * checkbox support disabled * selection style * selection support radio * add selections support * selection extra style * select all locale * sorter logic * add more desc * init Filter hooks * init filter hooks * update style * filter style * filter style * fix filter * sort control * ajax it * add expandedable css * expandable view style * fixed style * border style * empty style * fix pagination style * add fixed demo * un-comment * clean up * fix filter check logic * fix overflow & ellipsis conflict * fix tes * adjust scroll shadow * fix border fixed style * add part of test case * add filter test part * more test case * issue related test * filter test * adjust pagination logic * fix pagination test case * all selection test case * table sorter test case * table basic test * fix test case * update faq * update expandable doc * add v4 doc * add summary docs * more demo * fix selection * update snapshot * update test case * fix ff styling * update rc-table * update snapshot * update snapshot * fix lint * fix style lint * fix style * update snapshot * update desc * fix missing icon
4.0 KiB
4.0 KiB
order | title | ||||
---|---|---|---|---|---|
24 |
|
zh-CN
带行编辑功能的表格。
en-US
Table with editable rows.
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
interface Item {
key: string;
name: string;
age: number;
address: string;
}
const originData: Item[] = [];
for (let i = 0; i < 100; i++) {
originData.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
interface EditableCellProps {
editing: boolean;
dataIndex: string;
title: React.ReactNode;
inputType: 'number' | 'text';
record: Item;
index: number;
children: React.ReactNode;
}
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>
);
};
const EditableTable = () => {
const [form] = Form.useForm();
const [data, setData] = React.useState(originData);
const [editingKey, setEditingKey] = React.useState('');
const isEditing = record => record.key === editingKey;
const edit = record => {
form.setFieldsValue({ ...record });
setEditingKey(record.key);
};
const cancel = () => {
setEditingKey('');
};
const save = async key => {
try {
const row = await form.validateFields();
const newData = [...data];
const index = newData.findIndex(item => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
setData(newData);
setEditingKey('');
} else {
newData.push(row);
setData(newData);
setEditingKey('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
return;
}
};
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',
render: (text, record) => {
const editable = isEditing(record);
return editable ? (
<span>
<a href="javascript:;" onClick={() => save(record.key)} style={{ marginRight: 8 }}>
Save
</a>
<Popconfirm title="Sure to cancel?" onConfirm={() => cancel(record.key)}>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<a disabled={editingKey !== ''} onClick={() => edit(record)}>
Edit
</a>
);
},
},
];
const components = {
body: {
cell: EditableCell,
},
};
const mergedColumns = columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
}),
};
});
return (
<Form form={form} component={false}>
<Table
components={components}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="editable-row"
pagination={{
onChange: cancel,
}}
/>
</Form>
);
};
ReactDOM.render(<EditableTable />, mountNode);
.editable-row .ant-form-explain {
position: absolute;
font-size: 12px;
margin-top: -4px;
}