react+antd4表格添加行 编辑 删除功能

配置表格头部 colums
const columns = [
{
title: ‘姓名’,
dataIndex: ‘name’,
inputType: ‘text’,
},
{
title: ‘得分（10）’,
dataIndex: ‘ppt’,
inputType: ‘number’,
max: 10,
},
{
title: ‘得分（10）’,
dataIndex: ‘cg’,
inputType: ‘number’,
max: 10
},
{
title: ‘得分（10’,
dataIndex: ‘gh’,
inputType: ‘number’,
max: 10,
},
{
title: ‘得分（10）’,
dataIndex: ‘bd’,
inputType: ‘number’,
max: 10,
},
{
title: ‘得分（10）’,
dataIndex: ‘sw’,
inputType: ‘number’,
max: 10,
},
{
title: ‘总得分（50）’,
dataIndex: ‘df’,
inputType: ‘number’,
max: 50,
},
{
title: ‘操作’,
key: ‘del’,
dataIndex: ‘cz’,
isEdit: true,
width: ‘10%’,
render: (_: any, record: { key: React.Key }) => {
return (
<Popconfirm title=“您确定要删除吗?” onConfirm={() => handleDelete(record.key)}>
删除

)
}
},
];
创建table 验证数据 antd4修改了验证的方式，写一个margedColUmns方法，我们遍历columns，根据inputType的不同配置不同的输入框，以及不同的验证方式，render一下

增加与删除的功能

因为formitem的name不同 带着索引，所以最后我们要整合成一样的key 的数组对象提交给后台