antd官方示例里面有这样的组件,直接使用Form.List来实现了,只需要配置一个规则就可以了,但是配置的时候,它官方示例里面都是默认没有内容的,需要手动再另外添加一个结果,所以就想在初始化的时候,就配置拥有一个,并且第一个还不能删除:
要想初始化的时候就有一个,可以配置Form.List的配置项:initialValue
比如将其配置为:initialValue={[1]} ,那么初始化的时候,就会拥有一个表单域。
?
如果想配置第一个表单域不能删除,就可以在 删除的地方做个判断,是不是第一个:
在map遍历的时候,添加一个索引,通过判断这个索引是不是第0个,然后是否展示关闭按钮
表单域逻辑代码:
<Form.List name="items" key={1} initialValue={[1]}>
{(fields = [], { add, remove }) => (
<div
style={{
display: 'flex',
rowGap: 16,
flexDirection: 'column',
justifyContent: 'center',
}}
>
{fields.map((field, index) => (
<Card
size="small"
title={`价格规则${field.name + 1}`}
key={field.key}
extra={
index !== 0 ? (
<CloseOutlined
onClick={() => {
remove(field.name)
}}
/>
) : null
}
>
<Form.Item
label="整场价格"
name={[field.name, 'name']}
>
<Input />
</Form.Item>
<Form.Item
label="散客价格"
name={[field.name, 'name']}
>
<Input />
</Form.Item>
<Form.Item
label="价格时间"
name={[field.name, 'name']}
>
<Input />
</Form.Item>
{/* 星期选择 */}
<div className="week">
<Checkbox.Group
options={options}
onChange={onChange}
/>
</div>
</Card>
))}
<Button
type="dashed"
onClick={() => add()}
style={{ width: '100px', margin: '0 auto' }}
>
添加价格
</Button>
</div>
)}
</Form.List>