低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

在这信息化时代,表单作为数据的收集和展示工具,已经渗透到不同的角落。JVS低代码对表单的设计和操作进行了不断的优化和创新。其中,联动回显作为一项重要的功能,无论是多级数据级联控制、组件的联动控制,还是多表的数据回显控制,都能极大地提升用户体验和数据的精准度,让用户可以更加高效、便捷地填写表单。

在表单填写时,往往存在一些数据根据表单的选择数据进行联动回显。

例如,地区选择时,下拉选择“重庆”,则展示“重庆“对应的地区。

联动目前存在多种情况:

1、多级数据级联控制

2、组件的联动控制

3、多表的数据回显控制

多级数据级联控制

实现多级数据级联控制可以通过树形字典实现,多级数据的联动选择。

如图所示:

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

操作的方式:

a、选择级联选择组建

b、选择对应的静态字典的数据

c、在界面上可以看到对应的级联选择

字典的设置位置:

在应用字典中,选择对应的字典项,选择对应的操作,即可实现多级字典的配置。

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

组件的显隐控制

组件显隐控制,组件的显隐状态控制根据其他组件的值来判断是否显示。通过组件有一个显隐控制的配置项实现。

例如下图,通过地址下拉框联动实现4个地址输入框的显示与隐藏。

第一步:如下图先配置对应的下拉框与输入框

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

第二步:设置下拉框的选项,如图所示:

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

第三步:设置每个输入框的显隐控制,进入显隐控制界面,

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

配置的效果如图所示:

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

一对多的联动回显

主表对子表的多数据联动回显设置,效果如下:

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

配置如图:

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

步骤:

第一步:选择表格组件

第二步:选择表格对应的子表模型

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

第三步:拖对应的基础组件进入表格,并选择对应的字段

低代码表单引擎:多级数据、多表数据回显、组件的联动等配置举例

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月13日 下午1:13
下一篇 2024年5月13日 下午1:25

相关推荐