主要利用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>
- 实现效果图
- 输入框为空时则提示输入
2、点击submit校验所有输入框
- 增加、删除按钮可以动态增加删除数列数据条数
实现思想参考网站官网讲解