ant design框架 Form.List怎么能默认显示3条数据
时间: 2023-07-16 14:13:54 浏览: 154
默认显示三条数据,点击更多显示余下数据
3星 · 编辑精心推荐
在Ant Design的Form.List中设置默认显示3条数据,可以通过以下步骤实现:
1. 在Form.List组件中设置initialValues属性为一个包含3个空对象的数组(即初始化3个空表单项):
```
<Form.List name="items" initialValues={[{}, {}, {}]}>
{(...)}
</Form.List>
```
2. 在Form.List的子组件中,利用initialValues属性来初始化表单字段值:
```
<Form.List name="items" initialValues={[{}, {}, {}]}>
{(fields, { add, remove }) => (
<>
{fields.map((field, index) => (
<Form.Item
{...field}
label={`Item ${index + 1}`}
name={[field.name, 'name']}
fieldKey={[field.fieldKey, 'name']}
rules={[{ required: true, message: 'Missing item name' }]}
initialValue={field.initialValue?.name}
>
<Input placeholder="Item name" />
</Form.Item>
))}
(...)
</>
)}
</Form.List>
```
在上述代码中,我们将每个表单项的name属性设置为一个数组,如['0', 'name'],表示该表单项对应的初始值的属性名为items[0].name。然后利用initialValue属性来设置每个表单项的初始值,即field.initialValue?.name,其中?.表示如果该属性值为undefined,则不进行初始化。
这样,就可以在Form.List中默认显示3条数据了。
阅读全文