Skip to content

分组表单组件(数组组件) ​

在 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最少添加几项Number0
modelValue (v-model)分组表单的值any[]-
defaultValue设置新增分组表单的默认值Object-
sortBtn是否显示顺序调整按钮Booleantrue
disabled是否禁用Booleanfalse
onBeforeRemove删除时前置回调,返回false时取消操作(value: any[], index: number) => boolean|Promise|undefined-
onBeforeAdd新增时前置回调,返回false时取消操作(value: any[]) => boolean|undefined-
parse分组表单创建前修改表单规则(rule:Rule[])=>Rule[]-

events ​

事件名说明返回值
changevalue 发生变化后触发-
add增加一项后触发-
remove删除一项后触发-
itemMounted新增的分组表单初始化完成后触发-
[field-eventName]监听分组表单 emit 事件,格式为分组表单字段名拼接事件名称-

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用