基于ant.design做一个可编辑的table表格，且实现可校验样式、增加、删除数据

主要利用Form.List的field进行拓展，结合table使用

嵌套表单字段需要对 field 进行拓展，将 field.name 和 field.fieldKey 应用于控制字段。

// 只贴关键代码
const onFinish = (values)=>{

	console.log(values) // 可以得到table
}

<Form initialValues={ {table:[{name:'lily'},{name:'lisa'}]} } onFinish={ onFinish } >

<Form.Item
        label="测试table"
      >
        <Form.List name="table">
          {(fields, {add, remove}) => {
            const rules = [{required: true, message: '请填充内容!'}];
            return (
              <div>
                <Table dataSource={fields} columns={[
                  {
                    title:'姓名',
                    dataIndex:'name',
                    key:'name',
                    render:(text,record)=>{
                      return <Form.Item
                        rules={rules}
                        name={[record.name, "name"]}
                        fieldKey={[record.fieldKey, "name"]}
                      >
                        <Input placeholder="姓名" />
                      </Form.Item>
                    }
                  },
                  {
                    title:'年龄',
                    dataIndex:'age',
                    key:'age',
                    render:(text,record)=>{
                      return <Form.Item
                        rules={rules}
                        name={[record.name, "age"]}
                        fieldKey={[record.fieldKey, "age"]}
                      >
                        <Input placeholder="年龄" />
                      </Form.Item>
                    }
                  },
                  {
                    title:'地址',
                    dataIndex:'address',
                    key:'address',
                    render:(text,record)=>{
                      return <Form.Item
                        rules={rules}
                        name={[record.name, "address"]}
                        fieldKey={[record.fieldKey, "address"]}
                      >
                        <Input placeholder="地址" />
                      </Form.Item>
                    }
                  },
                  {
                    title:'操作',
                    dataIndex:'action',
                    key:'action',
                    render:(text,record)=>{
                      return <>
                      <Button onClick={()=>add()}>新增</Button>
                      <Button onClick={()=>remove(record.name)}>删除</Button>
                      </>
                    }
                  }
                ]} />
              </div>
            );
          }}
        </Form.List>
      </Form.Item>

</Form>

• 实现效果图

1. 输入框为空时则提示输入
   
   2、点击submit校验所有输入框
   

• 增加、删除按钮可以动态增加删除数列数据条数

实现思想参考网站官网讲解