antd的动态表单配置默认拥有一个或几个，第一个是否可以删除

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>