JVS低代码表单中下拉框是如何配置的?

2023-10-30 13:20

本文主要是介绍JVS低代码表单中下拉框是如何配置的?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

什么是表单下拉框

表单下拉框是一种用户界面元素,通常用于表单中,允许用户从一组预定义的选项中选择一个选项。表单下拉框由一个下拉箭头和一个选项列表组成,用户可以通过点击下拉箭头来展开选项列表,然后选择其中的一个选项。表单下拉框通常用于收集用户的信息,例如选择国家、省份、性别等。下拉框有助于保证数据的准确性和规范性。

适用场景

从多个下拉选项中选择其中一项,适用于选项较多的时候,可自定义选项内容,也可用于 数据联动关联其他模型(表单、列表) 等多个场景,比如选择请假表单内的请假类型、性别等字段的时候,可以用下拉单选组件。我们先看一个示例:

注意:

  • 下拉单选组件的选项值的长度最大不能超过 255 个字符;
  • 下拉组件存储值为其他数据模型的所选择数据的id。

基础功能配置

  • 基础配置如下图所示:

①:下拉框组件,可以将组件拖拽至表单画布中,实现组件的引用

②:组件绑定模型的字段,点击字段名称后,系统会把本表单对应的模型字段展示出来,选中即可

③:组件的中文名称,修改后会将组件的名称同步修改

④:组件的显隐控制装填设置,普通(刻度可操作)、只读(可读不可修改)、隐藏(不可见不可操作)

⑤:默认值,取值方式有两种,自定义和公式复制,自定义可以直接写入本字段的默认值,公式赋值通过公式函数计算后赋值

⑥:显示控制,通过其他组件结果的设置内容判断条件,当条件为真时展示本下拉框

⑦:禁用控制,通过其他组件结果的设置内容判断条件,当条件为真时本下拉框禁止操作

⑧:网络设置(逻辑触发),当内容修改后,且鼠标失焦后,将触发逻辑(用户自定义的逻辑)

  • 扩展配置内容,如下图所示

①:下拉选择多选开关,开启后,支持多个选项同时选中

②:是否支持搜索选项,开启后,可以通过搜索的方式对下拉选项的内容进行过滤(模糊匹配)

③:是否可以创建选项开关,开启后,系统是支持可以动态创建选项的

④:选择内容可以是缩略展示和完全展示

效果如下:

下拉选项数据来源配置

下拉框的选项数据有多种来源方式,根据不同的场景自己选择,目前下拉框数据选项来源有是那种方式

下拉项数据模式

数据项配置说明

配置数据

通过表单界面上的数据选项,进行枚举式配置

接口数据

通过API的接口返回下拉数据选项

数据模型

通过其他的数据模型(其他表)的数据进行展示选项(可设置过滤条件)

OA流程

动态组件

接下来我们详细看下具体的配置。

  • 配置数据模式,如下图所示:

①:选择下拉框数据类型为配置数据,系统展示配置数据的相关设置项,本质上是配置枚举值,这里的值是静态选项

②:可以点击“添加选项”按钮,增加选项,输入显示值和传递值的内容,用于

③:可以点击“删除”按钮,可以对已经设置的选项进行删除

  • 接口数据模式

接口模式是让下拉框的数据选项通过动态的从API接口中查询并展示出来,如下图所示:

①:选择数据类型为接口数据

②:配置接口API的具体URL地址,这里的接口是通过get的方式对接口地址进行请求

③:对请求回来的数据设置展示的字段

④:设置使用后选项对应真实传递值的字段

  • 数据模型

数据模型本质上也是实体的表,那么这种模式表示通过 另外的一张表里的数据进行展示下拉框的选项,如下图所示:

①:选择数据类型为数据模型(其他模型,可以是用户自定义的模型)

②:选择具体的数据模型,这里系统将本轻应用内所有模型都是可以选择

③:设置选中回显的字段内容

④:设置真实传递的字段内容,可以与现实值相同

⑤:设置副标题字段,通过额外的字段可以让用户更加便捷的选择选项数据

⑥:可以对数据设置过滤条件,一遍对大量数据进行精准的筛选

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

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

低代码表单往期干货

低代码表单引擎,轻松应对各类复杂表单需求

低代码表单组件中的八大文本框组成和用途,超详细讲解

低代码表单引擎:多样化的基础组件功能特性,满足各种业务需求

这篇关于JVS低代码表单中下拉框是如何配置的?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/308200

相关文章

浅谈配置MMCV环境,解决报错,版本不匹配问题

《浅谈配置MMCV环境,解决报错,版本不匹配问题》:本文主要介绍浅谈配置MMCV环境,解决报错,版本不匹配问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录配置MMCV环境,解决报错,版本不匹配错误示例正确示例总结配置MMCV环境,解决报错,版本不匹配在col

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Nginx中配置HTTP/2协议的详细指南

《Nginx中配置HTTP/2协议的详细指南》HTTP/2是HTTP协议的下一代版本,旨在提高性能、减少延迟并优化现代网络环境中的通信效率,本文将为大家介绍Nginx配置HTTP/2协议想详细步骤,需... 目录一、HTTP/2 协议概述1.HTTP/22. HTTP/2 的核心特性3. HTTP/2 的优

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu