跳到主要内容

下拉选择

适用场景#

以列表形式展示选项，用户可进行搜索和选择操作

基础能力说明#

绑定「关联关系、主子明细、枚举-单选、文本」字段#

表单容器绑定数据模型后，模型中的「关联关系、主子明细、枚举」字段会自动渲染为下拉选择组件，实现数据的选择录入
表单容器绑定数据模型后，在表单容器的字段属性中，可将文本字段映射生成的组件切换为下拉选择

选项配置说明#

选项配置中，选项名称为页面中展示的选项业务名称，选项值为表单提交保存时向接口传参、落库保存的实际存储值

通过表单容器中的「关联关系、关联关系」字段生成渲染出下拉选择组件时，组件会自动根据字段绑定的关联模型生成选项列表，并额外提供数据筛选属性，支持对选项进行筛选过滤（该情况下，选项名称强制为关联模型的主列字段，选项值强制为关联模型的数据标识字段）
通过表单容器中的「枚举-单选」字段生成渲染出下拉选择组件时，组件会自动根据字段绑定的通用选项集生成选项列表（该情况下，选项名称强制为关联选项集的选项值，选项值强制为关联选项集的选项标识）
其他情况下，支持手动配置选项列表

选中值属性说明#

选中值属性表示组件的默认表单值，可绑定变量或表达式实现选中值的动态变更
选中值需填入对应的选项值；填入选项名称无效

常见场景实践说明#

实现通过变量获取和改变表单值查阅文档
清空表单内容查阅文档
级联选择配置方法查阅文档
下拉选择组件通过变量生成选项列表查阅文档
表单组件隐藏时，提交对应表单数据查阅文档
利用表单组件搭建列表的筛选或搜索功能查阅文档

扩展场景说明#

通过数据模型数据生成动态选项列表#

创建 1 个数据模型，在其中新建一个班级名称字段
在该模型中录入几个班级的示例值
创建一个变量 class，数组类型，数据模型选择刚创建的模型
页面加载事件触发调用该数据模型的查看列表方法，查询该数据模型的列表数据，并将出参存入变量 class
点击组件选项属性右侧的数据绑定模式按钮
点击变量属性右侧的数据绑定按钮，变量属性绑定该 class 变量
标签名称和标签值属性输入数据模型中班级名称字段的字段标识，即可发现下拉选择组件的可选项加载为数据模型中的数据

属性介绍#

组件接收的外部传入的属性

绑定字段	`name`	`string`	基础属性	"formSelect"	提交表单时会将组件值提交保存到所配置的字段中
字段标题	`label`	`string`	基础属性	"下拉选择"	组件标题位置的显示内容
显示标题	`labelVisible`	`boolean`	基础属性	true	显示组件的标题
提示文字	`placeholder`	`string`	基础属性	"请选择"	用于说明组件用途或注意事项的提示文字
选中值	`value`	`string`	基础属性	""	默认选中的选项
必填	`required`	`boolean`	基础属性	false	启用后该组件强制必填，值不可为空
必填标识	`requiredFlag`	`boolean`	基础属性	true	启用后，组件若要求必填，则会显示必填星号标记
必填校验提示	`requiredMsg`	`string`	基础属性	"该项为必填项"	启用必填，但组件值为空时的提示信息
选项	`range`	`array`	基础属性	[{"label":"选项名称","value":"选项值"}]	供用户进行选择的选项列表
组件宽度(PC端)	`size`	`{"label":"大","value":"l"}\|{"label":"中","value":"m"}\|{"label":"小","value":"s"}\|{"label":"占满","value":"full"}`	基础属性	"full"	-
选项筛选	`where`	`array`	基础属性	-	-
选项	`tipBlock`	`string`	基础属性	""	-
布局方式	`layout`	`{"label":"自动","value":""}\|{"label":"水平","value":"horizontal"}\|{"label":"垂直","value":"vertical"}`	高级属性	""	设置当前组件的标题和输入选择区域为左右布局或上下布局，如选择“自动”，则跟随父级表单容器的配置
禁用	`disabled`	`boolean`	高级属性	false	是否禁用输入/选择，启用后组件强制显示为只读效果

事件介绍#

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

值改变	`change`		兼容三端	-
取消	`cancel`		兼容三端	-

适用场景
基础能力说明
扩展场景说明
- 通过数据模型数据生成动态选项列表
属性介绍
事件介绍