【干货】JVS低代码表单基础组件的配置与应用

表单的基础组件主要用于收集用户输入的数据,并对这些数据进行验证和处理。通过表单组件,用户可以输入各种类型的数据,如文本、数字、日期、选择项等。这些数据可以通过表单的提交按钮提交到服务器进行处理,从而使网站或应用程序能够获取用户输入的数据进行相应的处理与分析。表单组件还可以用于用户认证与授权,以及实现其他与数据交互相关的功能。表单的基础组件在网站或应用程序中起着至关重要的作用,有助于提高用户体验和数据交互的效率。

表单基础组件配置过程

配置流程:拖拽组件进入画布>>绑定数据>>设置属性控制>>设置样式控制>>按钮设置>>预览效果

①:组件展示区域,可以将组件拖拽进入表单画布

②:点击组件的标签,右侧弹出组件的设置面板

③:在组件设置面板中可以设计与组件相关的细节配置,包括绑定数据、设置样式、配置联动等操作

④:可预览表单配置的效果

⑤:可设置表单界面上的提交等按钮的触发逻辑

绑定数据模型字段

组件绑定数据模型本质上就是将本组件与模型的字段关联起来,字段的变更直接在模型对应的字段中进行存储调整,从而实现数据的增删改查,所以数据模型的绑定是表单实现数据变动的基础。

对数据模型的操作配置界面如下图所示

①:点击设置按钮,系统弹出模型的展示界面,这里展示的本表单对应绑定的模型

②:点击字段名称后的下拉框,系统弹出本表单关联模型的字段,可绑定已经存在的数据模型的对应字段

这里的数据模型和表单的创建方式相关,如下图所示,通过列表页去创建的表单都是和列表页对应的模型关联起来的

①:进入列表页设计界面

②:查看列表页对应的数据模型

③:查看该列表页对应的新增按钮(系统默认)的对应表单

④:查看新增表单的数据模型与列表页的数据模型一致

⑤:创建一个新的自定义表单

⑥:查看自定义表单与列表页的数据模型一致

⑦:设置表单组件与数据模型字段进行绑定

如果创建独立表单时,通过列表页创建独立表单时,系统会自动关联列表页对应的数据模型,如下图所示

①:通过列表页菜单的创建表单设计

②:查看创建的表单对应的数据模型与列表页的数据模型是一致的

③:引入组件,并绑定模型对应字段

④:查看配置最后的效果

基础属性控制

表单的基础属性控制包括对显隐状态、默认数据、动态公式、数据联动等

①:配置组件的名称与组件绑定数据模型字段

②:设置组件的可用模式,普通模式(可读、可写),只读模式(可读不可改),隐藏(不可见,不可改)

③:设置组件的默认值,自定义可以设置固定的默认值,如果选择公式时,系统通过函数配置的内容自动计算内容结果

④:显示控制可根据其他组件的结果进行控制本组件的显示条件,实现动态的显隐控制

⑤:禁用控制可根据其他组件的结果进控制本组件的使用状态,实现动态的组件可用性控制

⑥:网络设置(逻辑触发),组件一旦失焦时触发相应的逻辑(常用于对数据的复杂校验等)

⑦:数据联动是当前组件的数据依赖于其他组件的数据变换而随之调整

  • 显隐控制视频操作点击下方视频查看:

表单组件显隐控制

  • 函数配置操作如下图所示,通过组件结果去确定其他组件的内容

通过设置组件的默认值为公式,在弹出的公式界面使用函数式编程(类excel函数配置)

表单函数公式配置

  • 数据联动设置

如下图所示,通过组件的内容,去控制其他组件的内容展示,这里的内容展示通过另外的模型数据进行返回设置的

配置方式如下所示(后续章节详细介绍)

①:点击对应组件,打开属性设置面板

②:点击数据联动设置,进入数据联动配置界面,具体配置如下图所示(后续章节详细介绍)

组件的校验设置

组件校验设置主要用于组件录入内容的正确性验证,包括必填性、合规性、空值性等

组件的样式控制

组件的样式控制包括组件的宽度、占位提示等,如下图所示

在线demo:https://frame.bctools.cn/

基础框架开源地址:​​https://gitee.com/software-minister/jvs​​

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Docker】Docker Swarm介绍与环境搭建

为什么不建议在生产环境中使用Docker Compose 多机器如何管理?如何跨机器做scale横向扩展?容器失败退出时如何新建容器确保服务正常运行?如何确保零宕机时间?如何管理密码,Key等敏感数据? Docker Swarm介…

Istio实战(七)- Bookinfo 部署

1. Istio Bookinfo示例 1.1 部署Bookinfo # kubectl apply -f /apps/istio/samples/bookinfo/platform/kube/bookinfo.yaml -n hr1.2 确认Bookinfo已经部署正常 先确认以下pod和service已经被正确创建 # kubectl get pods -n hr NAME READY …

【Python3】【力扣题】190. 颠倒二进制位

【力扣题】题目描述: 【Python3】代码: 1、解题思路:将整数转为二进制字符串,截取、反转、补足32位,再转回整数。 知识点:bin(...):转为二进制字符串,即‘0bxx...’。 str [2:]&am…

[UDS] --- WriteDataByIdentifier 0x2E

1 0x2E功能描述 根据ISO14119-1标准中所述,诊断服务2E主要用于Client向Server(ECU)通过DID的方式写入相关的数据。 2 0x2E应用场景 一般而言,对于2E诊断服务,主要应用场景为以下场合: 在整车下线的过程中写入相关配置信息&…

【PG】PostgreSQL客户端认证pg_hba.conf文件

目录 文件格式 连接类型(TYPE) 数据库(database) 用户(user) 连接地址(address) 格式 IPv4 IPv6 字符 主机名 主机名后缀 IP-address/IP-mask auth-method trust reject scram-sha-256 md5 password gss sspi …

【Zero to One系列】微服务Hystrix的熔断器集成

前期回顾&#xff1a; 【Zero to One系列】springcloud微服务集成nacos&#xff0c;形成分布式系统 1、hystrix依赖包 首先引入hystrix相关的依赖包&#xff0c;版本方面自己和项目内相对应即可&#xff0c;我这这边是直接使用的默认版本。 <dependency><groupId&g…

ArcGIS中如何为跨带数据投影?

北京54、西安80高斯克吕格投影是我国常用的投影坐标系统,它们是一种分带投影方式,有3和6分带,不适合大范围内的投影使用。但是如果有份数据范围较大,跨越了多个度带,该选择哪个坐标系统进行投影转换呢? 在大范围内,常用的坐标系统有Albers等面积投影和Lambert等角投影,…

浦惠钱包app拉新推广渠道 实时数据

先介绍下推广渠道&#xff1a;“聚量推客”&#xff0c;可以申请浦惠钱包app拉新推广&#xff0c;支持地推和网推以及社群等渠道推广&#xff08;不限制&#xff09; 下面说下流程介绍 1、微信扫描推广码&#xff0c;输入用户手机号点击参与活动&#xff0c;进入浦惠钱包界面&…

MarkDown详细入门笔记

本帖整理了MarkDown的入门学习笔记~ 一.介绍 Markdown 是一种轻量级的「标记语言」&#xff0c;它的优点很多&#xff0c;目前也被越来越多的写作爱好者&#xff0c;撰稿者广泛使用。 诸如微信公众平台、CSDN博客、还有Typora中写文档的部分&#xff0c;均涉及到MD的功能~ 它…

超写实数字人小灿加入,助力火山语音全类型虚拟数字人应用创新

当发现更多AI科技作用于日常生活时&#xff0c;你是否想过竟然有一天会与AI数字人做同事&#xff1f;日前&#xff0c;火山语音团队重磅推出了一位神秘新成员——首个超写实数字员工小灿&#xff01;这位新同事不仅形象清新美丽&#xff0c;还有着很强的亲和力&#xff0c;大幅…

Python脚本:让工作自动化起来

Python是一种流行的编程语言&#xff0c;以其简洁和易读性而闻名。它提供了大量的库和模块&#xff0c;使其成为自动化各种任务的绝佳选择。 本文将探讨Python脚本及其代码&#xff0c;可以帮助您自动化各种任务并提高工作效率。无论您是开发人员、数据分析师还是只是想简化工…

uni-app:实现picker下拉列表的默认值设置

效果 分析 1、在data中将index8的初始值设置为-1&#xff0c;表示未选择任何选项&#xff1a; index8: -1, //选择的下拉列表下标 2、在bindPickerChange8事件处理函数中添加条件判断。如果选择的值是-1&#xff0c;则将this.index8设置为"请输入"&#xff0c;否则将…

vue3中常用的新组件

一、Fragment vue2中&#xff0c;组件必须有一个根标签 vue3中&#xff0c;组件可以没有根标签&#xff0c;内部会将多个标签包含在一个Fragment虚拟元素中。 优点&#xff1a;减少标签层级。 二、Teleport&#xff08;传送门&#xff09; 作用&#xff1a;将组件的 html …

掌握CSS Flexbox,打造完美响应式布局,适配各种设备!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 基…

【速看】如何通过合理的封装,让你的自动化脚本更上一层楼!

1. 前言 上一篇推文利用一个在图片范围内实现随机坐标点击的例子&#xff0c;去教会大家如何将自己想要的效果实现出来&#xff0c;受到大家的热情反响&#xff0c;在我们官方讨论群中&#xff0c;还有大佬对我们的示例代码进行优化改进&#xff0c;做了很多合理的函数封装&…

HCIA数据通信——交换机(Vlan间的通信与安全)

前言 之前的提到了交换机的概念和实验。不过交换机的一些功能还没有说完&#xff0c;我们的实验也仅仅是阻止相同地址段的IP地址互通&#xff0c;也没有用到子接口和路由器。显然&#xff0c;那样的配置过于简单。 端口安全 Port Security&#xff08;端口安全&#xff09;的功…

【1.2】神经网络:神经元与激活函数

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 神经网络&#xff08;随缘更新&#xff09; ✨特色…

node开发微信群聊机器人第⑤章

▍PART 序 看本文时&#xff0c;请确保前4章都已经看过&#xff0c;不然本章你看着看着思维容易跳脱&#xff01;再一个机器人教程只在公众号&#xff1a;“程序员野区”首发。csdn会跟着发一份&#xff0c;未经博主同意&#xff0c;请勿转载&#xff01;欢迎分享到自己的微信…

leetCode 76. 最小覆盖子串 + 滑动窗口

76. 最小覆盖子串 - 力扣&#xff08;LeetCode&#xff09; 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻…

【iOS免越狱】利用IOS自动化web-driver-agent_appium-实现自动点击+滑动屏幕

1.目标 在做饭、锻炼等无法腾出双手的场景中&#xff0c;想刷刷抖音 刷抖音的时候有太多的广告 如何解决痛点 抖音自动播放下一个视频 iOS系统高版本无法 越狱 安装插件 2.操作环境 MAC一台&#xff0c;安装 Xcode iPhone一台&#xff0c;16 系统以上最佳 3.流程 下载最…