分组表单组件(数组组件)
在 FormCreate 中,可以通过 group 组件轻松实现分组表单功能。分组表单组件允许在表单内嵌套其他表单,适合用于处理需要重复的表单内容,如动态添加联系人、商品规格等场景。
注意
分组表单内的组件联动推荐使用组件联动或者计算组件规则的方式实现。
操作分组表单内的组件时,需使用分组表单的 API。在父级表单中通过 api.getSubForm 方法可获取指定分组表单的操作接口。
基础的分组表单
展示了一个简单的分组表单,用户可以动态添加和删除表单项。
卡片风格
分组表单在 v3.2.31 版本新增卡片风格样式
指定字段的分组表单
该示例展示了如何只获取分组表单中某个特定字段的值。
计算分组表单中组件显示状态
根据主表单单选框的值(显示或隐藏),实时计算并设置分组表单中输入框的hidden属性,实现跨层级的条件显示控制。
监听分组表单中组件的事件
该示例展示了如何监听分组表单中组件的事件。
配置
props
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| rule (必填) | 嵌套组件的生成规则 | Rule[] | - |
| field | 只获取分组表单中此字段 | String | - |
| type(v3.2.31) | 组件的显示风格 | 'default' | 'card' | - |
| expand | 分组表单默认展开几项 | Number | - |
| options | 分组表单的option配置 | Object | - |
| button | 是否显示操作按钮 | Boolean | - |
| max | 最多添加几项 | Number | - |
| min | 最少添加几项 | Number | 0 |
| modelValue (v-model) | 分组表单的值 | any[] | - |
| defaultValue | 设置新增分组表单的默认值 | Object | - |
| sortBtn | 是否显示顺序调整按钮 | Boolean | true |
| disabled | 是否禁用 | Boolean | false |
| onBeforeRemove | 删除时前置回调,返回false时取消操作 | (value: any[], index: number) => boolean|Promise|undefined | - |
| onBeforeAdd | 新增时前置回调,返回false时取消操作 | (value: any[]) => boolean|undefined | - |
| parse | 分组表单创建前修改表单规则 | (rule:Rule[])=>Rule[] | - |
events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| change | value 发生变化后触发 | - |
| add | 增加一项后触发 | - |
| remove | 删除一项后触发 | - |
| itemMounted | 新增的分组表单初始化完成后触发 | - |
[field-eventName] | 监听分组表单 emit 事件,格式为分组表单字段名拼接事件名称 | - |


