Skip to content

表单的参数(props) ​

在使用 FormCreate 时,您可以通过各种 props 来定制表单的行为和外观。这些参数允许您控制表单的生成规则、配置选项、双向数据绑定等,为复杂的表单场景提供了强大的支持。

注意

表单的参数需要使用 ref 包裹实现响应式,不能直接置于计算属性(computed)中。rule 不能放在计算属性中!!!

在弹窗中渲染表单时,建议先对规则进行深拷贝再使用,可避免多处引用导致的数据污染问题。

Props 参数说明表 ​

以下是常用的 props 参数及其详细说明:

属性名类型默认值作用说明
ruleArray<Rule>[]表单生成规则,定义字段类型、名称、验证规则等。需遵循 表单生成规则 格式。
optionObject{}表单全局配置(如提交事件、布局方式等)。详见 全局配置选项。
modelValue(v-model)Object-通过 v-model 双向绑定表单数据,实时同步值,如 v-model="formData"。
api(v-model:api)Api-通过 v-model:api 获取表单实例(api),调用表单操作方法,如 v-model:api="formApi"。
localestring | Object-配置多语言,支持语言代码(如 "zh-CN")或自定义语言包。
tFunction-自定义多语言获取函数。
namestring-表单唯一名称,用于通过 formCreate.getApi(name) 获取实例。
indexstring | number-表单唯一标识,变化时自动清空表单数据。
disabledbooleanfalse全局禁用表单,所有字段不可编辑。优先级高于字段级 disabled 配置。
subFormbooleantrue标记是否为子表单,控制是否与父表单同步验证/提交。嵌套表单时需显式设置为 true。
extendOptionbooleantrue子表单是否继承父表单的全局配置(如 submitBtn、validateOnSubmit)。若需独立配置子表单,可设置为 false。
driverstring | object-自定义表单渲染逻辑,覆盖默认行为。
inForbooleanfalse标记表单是否在 v-for 循环中渲染。

注意

只有表单组件完成渲染才可以获取正确的 API 实例,使用前请务必确认渲染状态。

示例 ​

通过规则渲染表单 ​

通过 rule 参数可以定义表单的渲染规则

配置表单参数 ​

通过 option 参数可配置表单整体行为

获取表单 API ​

使用 v-model:api 获取表单操作对象 api。表单渲染后会把商品名称改成 goods_name。

通过name获取表单API ​

使用 name 值获取表单操作对象 api。点击按钮会通过 formCreate.getApi('demo') 读取表单数据。

禁用表单 ​

通过 disabled 定义表单整体禁用状态

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