import React, { useState } from "react";
import "./index.css";
import { Form, Input, InputNumber, Popconfirm, Table, Typography } from "antd";
interface Item {
key: string;
name: string;
age: number;
address: string;
}
const originData = [
{
key: "1",
name: "John Brown",
age: 32,
tel: "0571-22098909",
phone: 18889898989,
address: "123",
},
{
key: "2",
name: "Jim Green",
tel: "0571-22098333",
phone: 18889898888,
age: 42,
address: "123",
},
{
key: "3",
name: "Jim Green",
age: 32,
tel: "0575-22098909",
phone: 18900010002,
address: "123",
},
{
key: "4",
name: "Jim Green",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "999",
},
{
key: "5",
name: "Jake White",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "Dublin No. 2 Lake Park",
},
];
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
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 App: React.FC = () => {
const [form] = Form.useForm();
const [data, setData] = useState(originData);
const [editingKey, setEditingKey] = useState("");
const isEditing = (record: Item) => record.key === editingKey;
const edit = (record: Partial<Item> & { key: React.Key }) => {
form.setFieldsValue({ name: "", age: "", address: "", ...record });
setEditingKey(record.key);
};
const cancel = () => {
setEditingKey("");
};
const save = async (key: React.Key) => {
try {
const row = (await form.validateFields()) as Item;
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);
}
};
const columns = [
{
title: "名称",
dataIndex: "name",
onCell: ( record, index) => {
const currentName = record.name;
const previousName = index > 0 ? data[index - 1].name : null;
if (currentName === previousName) {
return {
rowSpan: 0
};
}
let rowSpan = 1;
for (let i = index + 1; i < data.length; i++) {
if (data[i].name === currentName) {
rowSpan++;
} else {
break;
}
}
return {
rowSpan: rowSpan,
}
},
},
{
title: "年纪",
dataIndex: "age",
width: "15%",
},
{
title: "地址",
dataIndex: "address",
width: "40%",
editable: true,
},
{
title: "operation",
dataIndex: "operation",
render: (_: any, record: Item) => {
const editable = isEditing(record);
return editable ? (
<span>
<Typography.Link
onClick={() => save(record.key)}
style={{ marginRight: 8 }}
>
确认
</Typography.Link>
<Popconfirm title="确认?" onConfirm={cancel}>
<a>取消</a>
</Popconfirm>
</span>
) : (
<Typography.Link
disabled={editingKey !== ""}
onClick={() => edit(record)}
>
Edit
</Typography.Link>
);
},
},
];
const mergedColumns:any = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: Item) => ({
record,
inputType: col.dataIndex === "address" ? "number" : "text",
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={false}
/>
</Form>
);
};
export default App;