本地数据代码模板自用,官网例子改改

// 编辑行的自定义表格
import React, { useState } from "react";
import {Table,Input,InputNumber,Popconfirm,Form,Typography,Divider,
} 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 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.Itemname={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] = 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 deleteRow = (record: Item) => {setData(data.filter((item: Item) => item.key !== record.key));};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: "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: (_: any, record: Item) => {const editable = isEditing(record);return editable ? (<span><Typography.LinkonClick={() => save(record.key)}style={{ marginRight: 8 }}>Save</Typography.Link><Typography.LinkonClick={() => cancel()}style={{ marginRight: 8 }}>Cancel</Typography.Link></span>) : (<><Typography.Linkdisabled={editingKey !== ""}onClick={() => edit(record)}>Edit</Typography.Link><Divider type='vertical' /><Popconfirmtitle='Sure to delete?'onConfirm={() => deleteRow(record)}><Typography.Link disabled={editingKey !== ""}>Delete</Typography.Link></Popconfirm></>);},},];const mergedColumns = columns.map((col) => {if (!col.editable) {return col;}return {...col,onCell: (record: Item) => ({record,inputType: col.dataIndex === "age" ? "number" : "text", // 设置类型dataIndex: col.dataIndex,title: col.title,editing: isEditing(record),}),};});return (<Form form={form} component={false}><Tablecomponents={{body: {cell: EditableCell,},}}bordereddataSource={data}columns={mergedColumns}rowClassName='editable-row'pagination={{onChange: cancel,}}/></Form>);
};export default EditableTable;