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

news/2024/9/17 17:56:21/ 标签: 开源, 低代码, 动态表单, 低代码表单, FormCreate

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

源码地址: Github | Gitee

<a class=低代码表单FormCreate" />

FormCreateProps_6">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
  • 说明:用于扩展表单的渲染逻辑。可以指定自定义的渲染器来替代默认的渲染行为,以满足特殊的业务需求。

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

<a class=低代码表单FormCreate" />

FormCreate_72">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.ppmy.cn/news/1525247.html

相关文章

Ubuntu 安装最新 Google Chrome 浏览器

谷歌浏览器使用简单并且用户友好&#xff0c;使用它浏览互联网愉悦至极。许多用户喜欢 Chrome&#xff0c;因为它加载网页又快又流畅。Chrome 提供强大的安全功能&#xff0c;帮助用户保持在线安全。Google Chrome 官方提供了一个 Debian 软件包存储库&#xff0c;基于 Debian …

reg和wire的区别 HDL语言

文章目录 数据类型根本区别什么时候要定义wire小结 数据类型 HDL语言有三种数据类型&#xff1a;寄存器数据类型&#xff08;reg&#xff09;、线网数据类型&#xff08;wire&#xff09;、参数数据类型&#xff08;parameter&#xff09;。 根本区别 reg&#xff1a; 寄存器…

Stable Diffusion绘画 | 生成高清多细节图片的各个要素

在数字艺术领域&#xff0c;AI绘画技术已经逐渐成为艺术创作的新趋势。Stable Diffusion作为一款领先的AI绘画工具&#xff0c;以其生成高清多细节图片的能力备受关注。现在&#xff0c;让我们一起来探索Stable Diffusion生成高清多细节图片的各个要素&#xff0c;开启你的创意…

【鸿蒙】HarmonyOS NEXT星河入门到实战5-基础语法

目录 一、字符串拼接 1.1 常规字符串拼接 1.2 模板字符串hello(符号在键盘的tab上面) 二、类型转换 &#xff08;数字和字符串&#xff09; 2.1 字符串转数字 2.2 数字转字符串 三、交互 3.1 点击事件 3.2 状态管理 3.3 计数器案例 四、运算符 4.1 算数运算符 4.2 赋…

五、TOGAF(架构内容框架)

TOGAF架构内容框架&#xff08;Architecture Content Framework&#xff09; TOGAF架构内容框架是TOGAF的一个重要组成部分&#xff0c;它提供了标准化的方法来描述企业架构。架构内容框架帮助架构师创建、管理和使用架构工件&#xff08;Artifacts&#xff09;&#xff0c;这些…

C++之打造my vector篇

目录 前言 1.参照官版&#xff0c;打造vector的基本框架 2.丰富框架&#xff0c;实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸&#xff0c;深度理解代码 迭代器…

1.单例模式

目录 简介 饿汉式 懒汉式 双重检测锁式 静态内部类式 枚举单例 测试 测试单例模式&#xff1a; 测试五种单例模式在多线程环境下的效率 问题&#xff08;拓展&#xff09; 例&#xff1a;反射破解单例模式 例&#xff1a;反序列化破解单例模式 总结&#xff1a;如何…

【PyCharm】常用快捷键

此篇文章内容会不定期更新&#xff0c;仅作为学习过程中的笔记记录 PyCharm的所有快捷键&#xff0c;其实均可以自定义&#xff0c;在位于Settings -> Keymap的目录下&#xff08;如图&#xff09;&#xff0c;可以自行改写为自己熟悉的键位组合。 若更改为PyCharm已存在的键…

GESP等级考试 C++二级-if语句

if语句是C中的选择语句&#xff0c;通过if语句程序可以在一种可能、二种可能或者多种可能中做出选择&#xff0c;对于不同的可能进行不同的处理。 1 一种可能 使用if语句对一种可能进行处理的格式如下所示&#xff1a; if (表达式) {语句; } 其中&#xff0c;if后面跟一个圆…

虹科方案 | 精准零部件测试!多路汽车开关按键功能检测系统

欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #LIN/CAN总线 #零部件测试 #CAN数据 导读 在汽车制造业中&#xff0c;零部件的安全性、功能性和可靠性是确保车辆整体性能的关键。虹科针对车辆零部件的LIN/CAN总线仿真测试&#xff0c;提出了基于虹科Baby-LIN系列产…

基于单片机的人脸识别的智能门禁系统设计

文章目录 前言资料获取设计介绍功能介绍设计清单核心代码具体实现截图参考文献设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等…

【Redis入门到精通一】什么是Redis?

目录 Redis 1. Redis的背景知识 2.Redis特性 3.Redis的使用场景 4.Ubuntu上安装配置Redis Redis Redis在当今编程技术中的地位可以说非常重要&#xff0c;大多数互联网公司内部都在使用这个技术&#xff0c;熟练使用Redis已经成为开发人员的一个必备技能。本章将带领读者…

oracle select字段有子查询会每次执行子查询吗

Oracle在执行SELECT语句时&#xff0c;如果子查询被嵌套在主查询中&#xff0c;子查询会被执行多次&#xff0c;这是因为子查询的结果不会被缓存。每次主查询需要用到子查询的结果时&#xff0c;子查询都会被重新执行。这种行为可能会导致性能问题&#xff0c;特别是当子查询结…

计算机网络:概述 - 计算机网络概述

目录 一. 互联网概述 1.1 网络 1.2 互联网 1.3 因特网 二. 互联网发展的三个阶段 三. 互联网的标准化工作 四. 互联网的组成 五. 计算机网络的类别 5.1 计算机网络的定义 5.2 计算机网络的不同类别 一. 互联网概述 起源于美国的互联网现如今已…

golang学习笔记13——golang的错误处理深度剖析

推荐学习文档 golang应用级os框架&#xff0c;欢迎star基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学…

简单了解 JVM

目录 ♫什么是JVM ♫JVM的运行流程 ♫JVM运行时数据区 ♪虚拟机栈 ♪本地方法栈 ♪堆 ♪程序计数器 ♪方法区/元数据区 ♫类加载的过程 ♫双亲委派模型 ♫垃圾回收机制 ♫什么是JVM JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java虚拟机。 虚拟机是指通过软件模…

新手制作视频用什么软件好?五款剪辑工具分享!

在数字时代&#xff0c;视频制作已成为许多人表达创意、记录生活的重要方式。但对于新手而言&#xff0c;面对琳琅满目的视频编辑软件&#xff0c;往往会感到无所适从。今天&#xff0c;我们就来推荐五款适合新手的视频制作软件&#xff0c;它们分别适用于不同的操作系统平台&a…

探索 Linux:开源操作系统的璀璨世界

摘要&#xff1a;本文围绕 Linux 展开深入探讨。从历史来看&#xff0c;20 世纪 90 年代初 Linus Torvalds 发布 Linux 内核源代码开启新纪元&#xff0c;开源模式使内核不断成长。Linux 的核心概念包含内核、文件系统、进程和线程等&#xff0c;其中内核管理硬件资源与提供系统…

Win10安装.net FrameWork3.5失败解决方法

win10安装.net FrameWork3.5失败解决方法 已经好久没有来投稿了,实在最近业务缠身,忙的焦头烂额(呵~多么伟大的牛马) 但最近开发使用windows11实在是拉胯的不行,升级完就后悔,所以就一怒之下,重装了win10 可是,好家伙,我重装完遇到一个问题,就是在使用.Net Framework3.5,按照Mi…

物理学基础精解【5】

文章目录 质点的速度一、平均速度二、瞬时速度三、速度质点的速度计算一、平均速度的计算二、瞬时速度的计算三、速度矢量的标量分量性质、定义、计算、例子和例题性质定义计算例子例题 质点的瞬时速度的方向的计算、性质、例子和例题计算性质例子例题 质点的速度 本题主要考察…