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)}>
            <a>删除</a>
          </Popconfirm>
          )
      }
    },
  ];

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

增加与删除的功能

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