数据选择框

更新时间: 2023-12-11 19:20:01

简介

数据选择框,是一种可动态改变下拉内容的下拉框组件。数据选择框在普通低码下拉框组件的基础上,额外支持了动态选项和多选能力,您可以借助数据选择框的能力搭建较为复杂的表单类应用。

image

属性说明

数据选择框共支持7个低代码配置项,分别是多选提示文字初始化样式数据源展示属性初始化时绑定事件内容变化时绑定事件

属性

描述

示例

使用说明

提示文字

提示文字

image

编辑选择框提示文字,可以在选择框内容为空的时候背景展示文字提示

多选

是否开启多选

image

当您期望您的数据选择框组件以多选的形式展示时,请开启此选项。否则关闭此选项。

初始化

是否应用初始化逻辑

image

当您期望在数据选择框组件加载前为其设置初始化状态时,请开启此选项并在初始化触发逻辑流选项中绑定逻辑流以处理初始化逻辑。

超出显示

配置超出显示时的方式

image.png

当开启多选后,可配置超出显示的方式。

  • 可全部显示出来。

  • 可以只在一行显示,超出的显示省略号。

  • 可以只在一行显示,超出的显示数量。

清空按钮

是否开启一键清空的功能

image.png

配置数据选择框是否开启一键清空的功能。

样式

样式配置

image.png

您可以直观地为您的数据选择框组件调节宽度和外边距,来匹配您的业务场景。

数据源

数据源配置

image

数据选择框组件需要像Data和List组件一样选择一个数据源以实现动态数据能力。直观来讲,数据选择框组件需要接受一组数据来驱动下拉选项,因此您需要为您的数据选择框组件绑定一组数据库实体或一条返回值为List的逻辑流,或一个一对多或多对多形式的数据上下文。数据选择框动态选项的内容将完全取决于数据选择框组件所绑定List的内容和其实体属性。

展示属性

下拉列表展示属性

image

类似普通下拉框组件,您需要为您的数据选择框指定其所展示的实体属性。如左图所示的数据选择框中,预览后数据选择框显示所有Course的名称。

初始化时绑定事件

初始化时绑定事件

image

初始化时绑定逻辑流,不同于普通下拉框组件,数据选择框组件受制于动态选项,需要您自行处理初始化逻辑。数据选择框组件初始化需要绑定一条逻辑流。该逻辑流至少接收一个入参,该参数代表数据选择框自身的全部数据,类型为List。同时该逻辑流需要一个入参List子集的返回值List或Object(取决于是否开启了多选),用于筛选初始化数据显示。该逻辑流的其他入参,则遵循数据容器组件的嵌套规则从第二个参数开始依次排步。

内容变化时绑定事件

内容变化时绑定事件

image

内容变化时绑定逻辑流,类似普通下拉框组件,您可以为您的数据选择框组件绑定一条逻辑流以响应下拉选择事件。相比位于数据容器中的普通下拉组件,数据选择框绑定逻辑流的入参情况略有不同。数据选择框绑定的触发变化时的逻辑流至少需要有两个参数:

  • 第一个参数代表您选中的单位,在多选情况下为List类型入参、单选情况则为Object类型入参。

  • 第二个参数代表数据选择框的自身全部数据,参数数据类型为List。

当触发变化事件时,数据选择框将自动构造这两个参数并传入逻辑流中调用。该逻辑流的其他入参,则遵循数据容器组件的嵌套规则从第三个参数开始依次排布。