开源FormCreate低代码表单组件的配置项和事件的详解

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

源码地址: Github | Gitee

FormCreate组件Props

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

rule

  • 类型Array
  • 说明 : 表单的生成规则,定义了表单中各个字段的类型、名称、验证规则等。您可以通过该属性指定表单的结构和行为。详细使用方法请参考 表单生成规则

option

  • 类型Object
  • 说明 : 配置表单的全局选项,例如表单的提交事件、重置行为、布局方式等。详细配置项请参考 表单全局配置

modelValue(v-model)

  • 类型Object
  • 说明 : 用于双向绑定表单数据的属性。通过 v-model,您可以实时获取和设置表单的值,使得表单数据与界面同步。

api(v-model:api)

  • 类型Api
  • 说明 : 通过 v-model:api 获取表单的 fApi 实例。fApi 提供了丰富的 API 接口,可以对表单进行操作,如获取数据、验证表单、重置表单等。详细使用方法请参考 表单API

name

  • 类型string
  • 说明 : 为表单设置名称。这在需要通过名称来获取表单的 fApi 实例时特别有用,您可以使用 formCreate.getApi(name) 方法来获取对应的 fApi

disabled

  • 类型boolean|undefined
  • 说明: 全局禁用表单。设置为 true 时,表单中的所有字段将被禁用,用户无法进行任何输入。

subForm

  • 类型bool
  • 说明 : 指示当前表单是否是子表单。如果设置为 true,则该表单将与父表单同步进行验证和提交操作,默认为 true

extendOption

  • 类型bool
  • 说明: 在表单嵌套时,子表单是否自动继承父表单的配置。默认情况下,子表单会继承父表单的全局配置选项。

inFor

  • 类型bool
  • 说明 : 指示表单是否在 v-for 循环中使用。当在循环中渲染多个表单时,设置此属性可以确保表单的唯一性和正确渲染。

index

  • 类型string|number
  • 说明: 表单的唯一标识值。当 index 变化时,表单将被自动清空,这对于在重置表单默认值时非常有用。

driver

  • 类型string|object
  • 说明:用于扩展表单的渲染逻辑。可以指定自定义的渲染器来替代默认的渲染行为,以满足特殊的业务需求。

通过这些 props,FormCreate 提供了高度的灵活性和可配置性。无论是简单的表单,还是复杂的嵌套表单,您都可以通过这些参数轻松地定制表单的行为和外观。我们建议新用户从基础的 ruleoption 配置入手,逐步了解并掌握更多高级参数的使用。

FormCreate组件事件

监听表单事件

FormCreate 提供了两种方式来监听表单事件:通过组件直接监听和通过 fApi 监听。

组件监听方式

你可以在模板中直接使用 v-on 或简写的 @ 语法来监听事件。

html 复制代码
<form-create @change="onChange"></form-create>

fApi 监听方式

你也可以通过 fApi 对象来监听事件,这种方式更适合在逻辑层面集中管理事件处理。

js 复制代码
fApi.on('change',this.onChange);

事件类型

以下是 FormCreate 支持的主要事件类型及其详细说明:

change

  • 类型
ts 复制代码
  type change = (field:string, value:any,rule:Rule, api:Api, setFlag: boolean)=>void;
  • 说明: 当表单组件的值在组件内部发生变化时触发。如果 setFlag 为 true,表示该变化是由外部手动修改引发的。

created

  • 类型
ts 复制代码
  type created = (api:Api)=>void;
  • 说明: 在表单实例创建时触发,适合进行一些全局的初始设置。

mounted

  • 类型
ts 复制代码
  type mounted = (api:Api)=>void;
  • 说明: 表单首次渲染完成后触发,通常用于初始化操作。

submit

  • 类型
ts 复制代码
  type submit = (formData:Object, api:Api)=>void;
  • 说明 : 当用户点击表单提交按钮时触发,或者通过调用 api.submit() 方法手动触发。

remove-field

  • 类型
ts 复制代码
  type removeField = (field:string, rule:Rule, api:Api)=>void;
  • 说明:当表单中某个字段被移除时触发,用于执行清理或同步操作。

remove-rule

  • 类型
ts 复制代码
  type removeRule = (rule:Rule, api:Api)=>void;
  • 说明:当某个规则从表单中移除时触发,适用于管理表单规则的动态变化。

repeat-field

  • 类型
ts 复制代码
  type repeatField = (rule:Rule, api:Api)=>void;
  • 说明 :当规则的 field 字段重复时触发,用于处理重复字段的情况。

emit-event

  • 类型
ts 复制代码
  type emitEvent = (emitName:string, ...args:any[])=>void;
  • 说明 : 在组件的 emit 事件被触发时触发,允许你监听并处理自定义事件。

control

  • 类型
ts 复制代码
  type control = (rule:Rule, api:Api)=>void;
  • 说明 : 当组件的 control 生效或失效时触发,适用于控制组件的显示逻辑。

reload

  • 类型
ts 复制代码
  type reload = (api:Api)=>void;
  • 说明: 在表单重载后触发,用于执行重载后的初始化操作。

通过了解并使用这些事件,开发者可以更好地控制表单的行为和用户交互逻辑,从而打造出更复杂、更具响应性的表单应用。

相关推荐
亲亲小宝宝鸭1 小时前
拖一拖控件,拖出个问卷(低代码平台)
前端·低代码
菩提小狗5 小时前
每日极客日报 · 2026年05月03日
ai·开源·极客日报·it热点·技术资讯
wenzhangli76 小时前
在低代码设计中践行 Harness Engineering
android·低代码·rxjava
2501_918126917 小时前
开源祭祖网页index
前端·开源·html
程序员夏末7 小时前
【开源经历 | 第一篇】参与开源需要掌握的Git和Github指令
git·开源
@不误正业8 小时前
第13章-开源鸿蒙是否适合做端侧AI操作系统
人工智能·开源·harmonyos
冬奇Lab8 小时前
一天一个开源项目(第91篇):RuFlo - Github趋势榜第一,让 AI 像蜂群一样协同作战的多智能体编排引擎
开源·agent·ai编程
HackTwoHub9 小时前
开源AI渗透测试的终极形态,让渗透测试进入“自动驾驶“时代、让渗透测试全自动!
人工智能·web安全·网络安全·开源·系统安全·安全架构·sql注入
挖AI金矿9 小时前
(十四)安全与权限控制--把Agent关进笼子里
开源·个人开发·ai编程·hermes agent·爱马仕agent
一拳一个娘娘腔9 小时前
把 GPT-4o 按在地上摩擦?DeepSeek V4 深度测评来了
开源