JVS低代码表单组件：单选与多选组件全解析

在现代化的数字界面中，组件是不可或缺的一部分。无论是在问卷调查、投票，还是在购物车等场景中，单选和多选组件都扮演着重要角色。它们让用户能够在一系列选项中做出决定，从而提高交互的效率和用户体验。

JVS低代码表单组件中提供了单选与多选的组件，接下来我们结合场景详细介绍单选与多选组件配置说明。

单选与多选组件配置

通常在用户界面中如问卷调查或投票中可能需要从多个选项中选择一个，这个时候我们就可以使用单选组件配置，有按钮式、圆形组合等不同样式可以应用于不同的场景。

例如用户在购物车场景下则可以用多选组件配置。

单选的基础设置说明如下：

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

②：组件的中文名称，修改后会将组件的名称同步修改。

③：组件的显隐控制装填设置，普通（可读可操作）、只读（可读不可修改）、隐藏（不可见不可操作）。

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

⑤：显示控制，通过其他组件结果的设置内容判断条件，当条件为真时显示单选组件。

⑥：禁用控制，通过其他组件结果的设置内容判断条件，当条件为真时单选禁止操作。

⑦：触发逻辑，当单选选择项后，且鼠标失焦后，将触发逻辑（用户自定义的逻辑）。

数据类型配置说明：

①：配置数据，默认数据来源是配置数据，可以自定义增加选项，传递值都是字符串。

②：接口数据，从接口获取数据，设置接口地址、显示值和传递值。

③：模型数据，选项数据来源于其它模型，设置关联的模型，显示值、传递值等。

当选择数据类型来源模型数据时配置说明如下:

①：数据类型来源模型。

②：关联模型，下拉展示应用下所有模型名称，根据需求选择可搜索查询。

③：显示值，指单选项显示的值，数据来自于选择的模型中字段。

④：传递值，固定只能传数据id。

⑤：副标题，对应显示值展示子标题。

单选的数据联动设置如下图所示：

①：数据联动显示关联其它模型。

②：选择回填数据的来源模型（跨表数据）。

③：选择本单选依赖的组件内容。

④：设置数据回填数据模型的字段中与依赖组件值相同的数据行（用于把想要的目标数据过滤出来）。

⑤：可设置多个条件。

⑥：设置回填到单选项的字段。

样式设置中有展示类型设置，有圆圈和按钮类型可选择。

多选组件同单选配置大同小异，其中数据类型多一个动态组件，样式设置不同。

多选组件数据类型配置如下：

①：配置数据，默认数据来源是配置数据，可以自定义增加选项，传递值都是字符串。

②：接口数据，从接口获取数据，设置接口地址、显示值和传递值。

③：模型数据，选项数据来源于其它模型，关联的模型，显示值、传递值等。

④：动态组件

样式设置配置说明如下：

①：控件宽度，默认13可自定义修改。

②：提示描述，指对多选组件提示信息的设置。

③：描述位置，默认设置右侧，可设置换行显示。

④：最小值，指一次可以勾选值的个数。

⑤：最大值，指最多可以勾选多少个选项。

⑥：展示类型，指勾选框的样式，默认方块展示，可设置按钮样式。

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

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