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

news2024/11/13 0:14:43

在使用开源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.coloradmin.cn/o/2129622.html

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

相关文章

【项目开发 | Python】基于“羊了个羊“风格的消除类小游戏

原创文章,不得转载。 目标:使用 Python 开发"羊了个羊"风格的消除类小游戏,合理运用 AIGC 工具提高开发效率;使用文生图工具实现图片设计等工作。 文章目录 项目背景项目介绍+项目展示游戏逻辑概述主界面游戏界面获胜界面失败界面附加功能项目细节项目测试测试样…

zabbix之钉钉告警

钉钉告警设置 我们可以将同一个运維组的人员加入到同一个钉钉工作群中&#xff0c;当有异常出现后&#xff0c;Zabbix 将告警信息发送到钉钉的群里面&#xff0c;此时&#xff0c;群内所有的运维人员都能在第一时间看到这则告警详细。 Zabbix 监控系统默认没有开箱即用…

JavaScript进阶day4

目录 1.深浅拷贝 1.1 浅拷贝 1.1.1 浅拷贝的认识 1.1.2 浅拷贝的小结 1.2 深拷贝 1.2.1 递归实现深拷贝 1.2.2 js类库lodash/cloneDeep实现深拷贝 1.2.3 JSON.stringify()实现深拷贝 2.异常处理 2.1 throw 抛异常 2.2 try /catch 捕获异常 2.3 debugger 3.处理thi…

嵌入式边缘计算:融合创新与未来展望

本文深入探讨了嵌入式边缘计算。首先解析了其概念&#xff0c;指出它是将计算和数据存储能力嵌入边缘设备以实现本地数据处理。阐述了其低延迟、高可靠性、节省带宽、隐私保护和高效节能等技术特点。接着介绍了关键技术&#xff0c;包括嵌入式系统设计、边缘计算架构、通信技术…

关于QT服务端客户端的聊天

服务段头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> #include<QMessageBox> #include<QDebug> #include<QList> #include<QTcpSocket>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_N…

设计一个算法,找出由str1和str2所指向两个链表共同后缀的起始位置

假定采用带头结点的单链表保存单词&#xff0c;当两个单词有相同的后缀时&#xff0c;则可共享相同的后缀存储空间&#xff0c;例如&#xff0c;’loading’和’being’的存储映像如下图所示。 设str1和str2分别指向两个单词所在单链表的头结点&#xff0c;链表结点结构为 data…

HashTable哈希表

概念 散列表(Hash Table)&#xff0c;又称哈希表。是一种数据结构&#xff0c;特点是:数据元素的关键字与其存储地址直接相关 在顺序结构以及树型结构中&#xff0c;数据元素的关键字与其存储位置没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码…

KV260 进阶开发(PYNQ驱动开发+Pixel Pack)

目录 1. 简介 2. PixelPacker HLS 实现 2.1 PixelPacker HLS 源码 2.2 PixelPacker 功能简介 2.3 头文件介绍 2.4 启动间隔 II 2.5 Case V24 片段解释 3. PixelPacker Py 驱动 3.1 PixelPacker Py 源码 3.2 PixelPacker 类详解 3.3 property 装饰器 3.4 操作寄存器…

一、(JS)JS中鼠标事件-mouseenter、mouseleave和mouseover、mouseout区别

一、单个元素下mouseenter、mouseleave和mouseover、mouseout没有区别 我们先来一个demo&#xff0c;设置一个div <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"…

INIC6081量产工具下载,initio6081开卡软件分享

国内固态硬盘常用&#xff0c;且有量产工具流传出来的主控厂商包括慧荣、群联、点序、英韧、得一微、瑞昱、联芸、迈威、国科、华澜微等等。 每个主控需要用各自对应的量产工具&#xff0c;不同的量产工具支持的闪存颗粒也有差异&#xff0c;因此要根据固态硬盘实际的主控型号…

基于SSM的酒店客房管理系统+LW示例参考

系列文章目录 1.基于SSM的洗衣房管理系统原生微信小程序LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统LW参考示例 3.基于SpringBootVue的企业人事管理系统LW参考示例 4.基于SSM的高校实验室管理系统LW参考示例 5.基于SpringBoot的二手数码回收系统原生微信小程序LW参考示…

Visual Studio 设置文件默认编码格式、行尾符等

文章目录 1.命令方式2.EditorConfig配置 1.命令方式 2.EditorConfig配置 微软官方文档 使用EditorConfig方式配置&#xff0c;无需Visual Studio软件自带对EditorConfig的支持&#xff0c;无需插件 将下面.editorconfig文件放在项目根目录下 root true # 所在目录是根目录…

基于SSM的二手交易管理系统的设计与实现 (含源码+sql+视频导入教程+文档)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的二手交易管理系统1拥有两种角色 管理员&#xff1a;商品管理、订单管理、充值管理、用户管理等用户&#xff1a;发布商品、查看闲置、充值账户、查看所有订单、发布求购信息、修…

今年白银市场的供需关系矛盾

自从2020年以来&#xff0c;白银手持连续4年都出现了供需缺口&#xff0c;预计今年的供需缺口将进一步扩大。2015年以来&#xff0c;白银总产量始终维持10亿盎司水平上下波动&#xff0c;2015~2023年的年均复合增速在0.4%&#xff0c;预计2024年的产量将下降1%。矿产银的产量从…

day-54 求出最多标记下标

思路 假设nums的长度为len&#xff0c;则返回数最大最大为&#xff08;len/2&#xff09;*2,所以可以将数组分为两部分&#xff0c;[0(len-1)/2]为一部分&#xff0c;[(len-1&#xff09;/2len-]为第二部分 解题过程 指针right从第二部分从右向左开始遍历&#xff0c;指针left…

Tensorboard 基础与使用-——界面介绍

在导入运行tensorboard得到一个event file文件。 tensorboard基本原理是这样的 python代码中将可视化的数据记录到event file中&#xff0c;保存至硬盘 采用tensorboard对event file文件进行读取&#xff0c;并在web端进行可视化 指令启动&#xff1a; tensorboard --logdir…

大数据Flink(一百一十七):Flink SQL的窗口操作

文章目录 Flink SQL的窗口操作 一、窗口的概述 二、Group Windows 1、​​​​​​​滚动窗口&#xff08;TUMBLE&#xff09; 2、​​​​​​​​​​​​​​滑动窗口&#xff08;HOP&#xff09; 3、​​​​​​​​​​​​​​Session 窗口&#xff08;SESSION&am…

军事目标无人机视角检测数据集 3500张 坦克 带标注voc

数据集概述 该数据集包含3500张无人机拍摄的图像&#xff0c;主要用于坦克目标的检测。数据集已经按照VOC&#xff08;Visual Object Classes&#xff09;标准进行了标注&#xff0c;适用于训练深度学习模型&#xff0c;特别是物体检测模型。 数据集特点 目标明确&#xff1…

通信工程学习:什么是GFP通用成帧规范

GFP&#xff1a;通用成帧规范 GFP通用成帧规范&#xff08;Generic Framing Procedure&#xff09;是一种先进的数据业务适配的通用协议和映射技术&#xff0c;由国际电联ITU-T的G.7041标准定义。该技术旨在透明地将各种不同物理层或逻辑链路层信号适配进入SDH&#xff08;同步…

C语言初识编译和链接

目录 翻译环境和运行环境编译环境预编译编译词法分析语法分析语义分析 汇编 链接运行环境 翻译环境和运行环境 在ANSI C的任何⼀种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执⾏的机器指令&#xff08;⼆进制指令&…