- 下拉选择（Select）
🧬 集合组件
下拉选择（Select）
Contribute选择
选择组件通常用于以下拉菜单格式向用户呈现选项列表。 用户每次只能从下拉列表中选择一个选项。
下拉单选组件通常由文本标签和下拉箭头图标组成。单击或轻触箭头图标会打开一个选项列表，供用户选择。 用户选择选项后，下拉菜单将关闭，并在组件中显示所选选项。
此组件通常用于表单、调查和其他数据输入场景，其中用户需要从预定义的选项集中选择一个选项。 它提供了一种紧凑而直观的方式来呈现选项列表，而不会占用太多屏幕空间或让用户一次性面对太多选项。
属性
手动选项
手动添加新选项或删除选项，并逐个配置选项。 选项的属性如下：
| 属性 | 说明 |
|---|---|
| 标签 | 选项的显示文本 |
| 值 | 与选项关联的值 |
| 已禁用 | 选项是否禁用 |
映射选项
您还可以通过将标签和值属性映射到相应的数据字段来从数据源添加选项。 您可以通过这种方式动态从数据库中获取选项。 本文末尾，我们将通过一个示例来演示如何使用它。
| 属性 | 说明 |
|---|---|
| 数据源 | 设置选项的数据源 |
| 标签 | 使用 {{item}} 设置选项的标签 |
| 值 | 使用 {{item}} 设置选项的值 |
| 已禁用 | 使用 {{item}} 设置选项是否禁用 |
其他属性
| 属性 | 说明 |
|---|---|
| 默认值 | 组件的初始值。 您可以通过键入JavaScript在{{}}中动态更改初始值。 |
| 占位符 | 输入字段为空时将显示该值。 |
| 标签 | 显示给用户的字段名称 |
| 标题 | 用于详细描述字段的说明 |
| 隐藏标签 | 设置是否显示标签 |
| 位置 | 设置标签相对于组件的位置 |
| 对齐方式 | 设置标签的对齐方式 |
| 宽度 | 当标签位于组件的左侧时，设置标签的宽度比 |
| 事件处理程序 | 响应组件事件触发查询、控制组件或调用其他API。 |
| 已禁用 | 控制组件是否被禁用的状态。 当组件被禁用时，无法对其进行修改或聚焦。 |
| 只读 | 控制组件是否为只读状态。 只读组件可以被选中和聚焦，但不能被修改。 |
| 显示清除按钮 | 设置是否显示清除按钮 |
| 工具提示 | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| 必填字段 | 仅在打开开关时有效。 |
| 自定义规则 | editor.inspect.setter_tooltip.custom_rule |
| 隐藏验证消息 | 您可以通过切换隐藏状态来隐藏输入值不正确时的错误消息。 您可以用JavaScript动态地更改隐藏状态。 |
| 表单数据键 | 构造数据属性时指定包装形式组件的键。 |
| 隐藏 | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
| 主题颜色 | 选择组件的主题颜色 |
方法
您可以使用其他组件来控制组件。 我们支持以下三种方法：
设置值
设置选定的选项，例如{{“value1”}}
| 属性 | 说明 |
|---|---|
| 值 | 已选择的值 |
清除值
清除所选选项
validate
验证输入信息是否合法
清除验证
清除验证消息
事件处理程序
我们支持聆听选择组件的onChange事件。
当所选选项更改时，它可以触发指定的动作。 这意味着当用户从选择的组件中选择不同的选项时，可以根据选定的选项采取特定行动。 例如，在Web表单中，选择不同的选项可以触发不同表单字段的显示或将表单提交到不同的目标。 通过这种方式，用户选择的选项可以影响他们正在使用的软件或Web应用程序的行为。 基于用户输入触发指定操作的能力是交互式软件设计的重要方面，可以提高软件的可用性和功能性。
数据
该组件具有一些常用数据，可以通过{{componentName.propertyName}}在应用程序中调用。
| 属性名称 | 说明 |
|---|---|
| 值 | 已选择的值 |
使用案例
接下来，我们将演示如何使用映射模式动态获取选项。
步骤1 添加操作
我们创建了一个叫做selection的表格，包括5列：options_en、options_jp、options_zh、options_kr、value。 我们将选项值存储在value中，并将不同语言的选项标签存储在其他列中。
创建一个操作来列出selection中的所有数据，名称为postgresql1
select * from selection
步骤2 配置组件
将数据源设置为
{{postgresql1.data}}根据语言设置标签
- 使用{{item.columnName}}设置列。
- 使用{{currentUserInfo.language}}设置用户在ILLA中使用的语言。
{{currentUserInfo.language=='ja-JP' ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_en }}
