下拉选择
#
适用场景以列表形式展示选项,用户可进行搜索和选择操作
#
基础能力说明#
绑定「关联关系、主子明细、枚举-单选、文本」字段- 表单容器绑定数据模型后,模型中的「关联关系、主子明细、枚举」字段会自动渲染为下拉选择组件,实现数据的选择录入
- 表单容器绑定数据模型后,在表单容器的字段属性中,可将文本字段映射生成的组件切换为下拉选择
#
选项配置说明选项配置中,选项名称为页面中展示的选项业务名称,选项值为表单提交保存时向接口传参、落库保存的实际存储值
- 通过表单容器中的「关联关系、关联关系」字段生成渲染出下拉选择组件时,组件会自动根据字段绑定的关联模型生成选项列表,并额外提供数据筛选属性,支持对选项进行筛选过滤(该情况下,选项名称强制为关联模型的主列字段,选项值强制为关联模型的数据标识字段)
- 通过表单容器中的「枚举-单选」字段生成渲染出下拉选择组件时,组件会自动根据字段绑定的通用选项集生成选项列表(该情况下,选项名称强制为关联选项集的选项值,选项值强制为关联选项集的选项标识)
- 其他情况下,支持手动配置选项列表
#
选中值属性说明- 选中值属性表示组件的默认表单值,可绑定变量或表达式实现选中值的动态变更
- 选中值需填入对应的选项值;填入选项名称无效
#
常见场景实践说明- 实现通过变量获取和改变表单值 查阅文档
- 清空表单内容 查阅文档
- 级联选择配置方法 查阅文档
- 下拉选择组件通过变量生成选项列表 查阅文档
- 表单组件隐藏时,提交对应表单数据 查阅文档
- 利用表单组件搭建列表的筛选或搜索功能 查阅文档
#
扩展场景说明#
通过数据模型数据生成动态选项列表创建 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 | 是否禁用输入/选择,启用后组件强制显示为只读效果 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
值改变 | change | 兼容三端 | - | |
取消 | cancel | 兼容三端 | - |