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

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

源码地址: Github | Gitee

低代码表单FormCreate

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组件事件

监听表单事件

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

组件监听方式

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

<form-create @change="onChange"></form-create>

fApi 监听方式

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

fApi.on('change',this.onChange);

事件类型

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

change

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

created

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

mounted

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

submit

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

remove-field

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

remove-rule

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

repeat-field

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

emit-event

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

control

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

reload

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/53891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

由于安装nvm 引发的vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

&#x1f388;亲爱的读者朋友们&#xff1a; 如果你觉得这篇文章对你有所帮助&#xff0c;恳请你为我点个赞&#x1f44d;。你的每一个赞都是对我辛勤创作的认可&#xff0c;是我继续前行的动力源泉。 同时&#xff0c;也欢迎你关注我的 CSDN 博客。在这里&#xff0c;我会持续…

探索数据可视化的奥秘:Seaborn库的魔力

文章目录 探索数据可视化的奥秘&#xff1a;Seaborn库的魔力背景&#xff1a;为何选择Seaborn&#xff1f;Seaborn是什么&#xff1f;如何安装Seaborn&#xff1f;简单函数介绍与示例场景应用示例常见问题与解决方案总结 探索数据可视化的奥秘&#xff1a;Seaborn库的魔力 背景…

深度剖析iOS渲染

iOS App 图形图像渲染的基本流程&#xff1a; 1.CPU&#xff1a;完成对象的创建和销毁、对象属性的调整、布局计算、文本的计算和排版、图片的格式转换和解码、图像的绘制。 2.GPU&#xff1a;GPU拿到CPU计算好的显示内容&#xff0c;完成纹理的渲染&#xff0c; 渲染完成后将渲…

c# Csv文件读写示例,如果文件存在追加写入

功能 1.写入 2.读取 导出文件效果 调用示例 注意示例中的ToDataTable()方法是自己的封装的扩展方法&#xff0c;源码在集合扩展方法-CSDN博客 private List<MarkDataModel> createMarkDataList(int count){var markDataModels new List<MarkDataModel>();for (…

RTMP播放器延迟最低可以做到多少?

技术背景 RTMP播放器的延迟可以受到多种因素的影响&#xff0c;包括网络状况、推流设置、播放器配置以及CDN分发等。因此&#xff0c;RTMP播放器的延迟并不是一个固定的数值&#xff0c;而是可以在一定范围内变化的。 正常情况下&#xff0c;网上大多看到的&#xff0c;针对R…

小琳AI课堂:LLaMA 3.1 开源大模型的全新里程碑

引言 大家好&#xff0c;这里是小琳AI课堂&#xff01;今天我们要聊的是Meta最新发布的开源大模型LLaMA 3.1。这个版本在AI界掀起了不小的波澜&#xff0c;不仅在参数规模上有显著提升&#xff0c;还在多项性能上实现了突破。让我们一起来看看LLaMA 3.1带来的新变化和意义吧&a…

爆改YOLOv8|利用SCConv改进yolov8-即轻量又涨点

1&#xff0c;本文介绍 SCConv&#xff08;空间和通道重构卷积&#xff09;是一种高效的卷积模块&#xff0c;旨在优化卷积神经网络&#xff08;CNN&#xff09;的性能&#xff0c;通过减少空间和通道的冗余来降低计算资源的消耗。该模块由两个核心组件构成&#xff1a; 空间重…

PHP轻量级高性能HTTP服务框架 - webman

摘要 webman 是一款基于 workerman 开发的高性能 HTTP 服务框架。webman 用于替代传统的 php-fpm 架构&#xff0c;提供超高性能可扩展的 HTTP 服务。你可以用 webman 开发网站&#xff0c;也可以开发 HTTP 接口或者微服务。 除此之外&#xff0c;webman 还支持自定义进程&am…

Obsidian git sync error / Obsidian git 同步失敗

Issue: commit due to empty commit message Solution 添加commit資訊&#xff0c;確保不留空白 我的設置&#xff1a;auto-backup: {{hostname}}/{{date}}/

Scala尾递归解决爆栈问题

引言 我在上篇中详细的讲了递归的一系列问题&#xff0c;多路递归&#xff0c;爆栈问题&#xff0c;尾递归优化等&#xff0c;今天就实际演示一下尾递归是如何解决爆栈问题的&#xff0c;以及它的原理是什么&#xff1f; 支持尾递归优化的语言 尾递归是一种特殊的递归形式,如果…

SpringBoot开发——整合Logbook进行HTTP API请求响应日志输出

文章目录 1. 简介依赖管理2. 实战案例2.1 基本用法2.2 结合Logback日志记录到文件2.3 自定义核心类Logbook2.4 自定义日志输出Sink2.5 与RestTemplate集成1. 简介 记录HTTP API请求响应日志对于监控、调试和性能优化至关重要。它帮助开发者追踪API的使用情况,包括请求来源、参…

接口自动化测试推荐用什么框架?

在推荐接口自动化测试框架时&#xff0c;需要考虑多个因素&#xff0c;包括项目需求、技术栈、团队经验和个人偏好。 以下是几个常用的接口自动化测试框架供你参考&#xff1a; Postman&#xff1a; Postman是一个功能强大且易于上手的接口测试工具&#xff0c;它提供了许多…

景联文科技:专业数据标注公司,推动AI技术革新

数据标注作为AI技术发展的重要支撑&#xff0c;对于训练高质量的机器学习模型以及推动应用领域的创新具有不可替代的作用。 景联文科技作为专业的数据标注公司&#xff0c;致力于提供专业的数据标注服务&#xff0c;帮助客户解决AI链条中的数据处理难题&#xff0c;共同推动人工…

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、…

k8s的加密配置secret和应用配置configmap

目录 加密配置 secret的三种类型 创建opaque类型的两种方式 方法一 方法二 如何把secret挂载到pod当中 把secret作为环境变量传到pod当中 指定harbor私有仓库加密的secret配置 应用配置 configmap 创建configmap的方式 在pod里面用configmap做pod的环境变量 **用c…

Java项目: 基于SpringBoot+mybatis+maven校园资料分享平台(含源码+数据库+答辩PPT+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven校园资料分享平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简…

gdb 前端:kdbg 安装使用

文章目录 1. 前言2. kdbg 安装使用2.1 安装 kdbg2.2 使用 kdbg 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. kdbg 安装使用 2.1 安装 kdbg kdbg 是 gdb 的图形化界面的前端&#xff0c;在 …

如何使用Jmeter关联influxDB?

一、添加"添加后端监听器" 二、后端监听器实现选择&#xff0c;"org. apache. jmeter. visualizers. backend. influxdb.InfluxdbBackendlistenerClient" 三、修改"influxdbUrl&#xff1a;自己的主机、application:取一个项目名" 四、influxDB&…

网络层协议介绍

目录 一、网络层的功能 二、ip数据包格式 三、ICMP协议&#xff08;Internet控制报文协议&#xff09; 3.1功能 3.2 ping命令 3.2.1ping命令的用法 3.2.2扩展 3.3 tracert命令&#xff08;windows&#xff09; 四、arp协议 4.1ARP协议是如何工作的 4.2工作原理&#x…

可提示 3D 分割研究里程碑!SAM2Point:SAM2加持泛化任意3D场景、任意提示!

郑重声明&#xff1a;本解读已获得论文作者的原创解读授权 文章链接&#xff1a;https://arxiv.org/pdf/2408.16768 在线demo: https://huggingface.co/spaces/ZiyuG/SAM2Point code链接&#xff1a;https://github.com/ZiyuGuo99/SAM2Point 亮点直击 无投影 3D 分割&#xff1…