import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table, Input, InputNumber, Popconfirm, Form, Typography } from 'antd';
const originData = [];
//赋值
for (let i = 0; i < 100; i++) {
originData.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const EditableCell = ({
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();//通过 Form.useForm 对表单数据域进行交互。
const [data, setData] = useState(originData);//保存数据
const [editingKey, setEditingKey] = useState('');//设置编辑关键字
const isEditing = (record) => record.key === editingKey;
const edit = (record) => {
form.setFieldsValue({//form.setFieldsValue设置表单的值
name: '',
age: '',
address: '',
...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];
//splice在数组中添加新的元素
newData.splice(index, 1, { ...item, ...row });
setData(newData);
setEditingKey('');
} else {
newData.push(row);
setData(newData);
setEditingKey('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
//数据列
const columns = [
{
title: 'address',
dataIndex: 'address',
width: '40%',
editable: true,
},
{
title: 'operation',
dataIndex: 'operation',
render: (_, 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}>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
// Typography排版 Typography.Link 排版自定义组件
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
Edit
</Typography.Link>
);
},
},
];
//mergedColumns合并列
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 (
//component={false} 取消本身组件的属性
//bordered是否展示外边框和列边框
//pagination分页器,参考配置项或 pagination 文档,设为 false 时不展示和进行分页
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell,
},
}}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="editable-row"
pagination={{
onChange: cancel,
}}
/>
</Form>
);
};
ReactDOM.render(<EditableTable />, document.getElementById('container'));
react antd 可编辑行的一些解读
最新推荐文章于 2024-06-06 11:13:21 发布