- 多选组件
🧬 集合组件
多选组件
Contribute多选
多选组件可以在需要从列表中选择多个选项的情况下有用。 这样可以更有效地输入数据和进行过滤。 组件可以用不同的属性配置来实现不同的效果，同时也支持更多的自定义方法和事件处理程序。
您可以手动或从您的数据源中批量添加选项。 在这篇文章中，我们将详细介绍如何使用多选组件。
属性
手动选项
添加新选项或手动删除选项，并逐个配置选项。 备选办法的特性如下：
| 属性 | 描述 |
|---|---|
| Label | 选项显示的文本 |
| Value | 与选项关联的值 |
| Disabled | 选择选项是否禁用 |
Mapped 选项
您也可以通过映射标签和值属性从数据源添加选项到相应的数据字段。 您可以通过这种方式动态地从数据库中获取选项。 在本条末尾，我们将展示如何通过一个例子来使用它。
| 属性 | 描述 |
|---|---|
| Data source | 设置选项的数据源 |
| Label | 使用 {{item}} 设置选项的标签 |
| Value | 使用 {{item}} 来设置选项的值 |
| Disabled | 使用 {{item}} 来设置选项是否被禁用以选择 |
其他属性
| 属性 | 描述 |
|---|---|
| Default value | 组件的初始值。 您可以在 {{}} 中输入JavaScript 动态更改初始值。 |
| Placeholder | 当输入字段为空时，值将显示。 |
| Label | 显示给用户的字段名称 |
| Caption | 详细描述字段的标题 |
| Hidden label | 设置是否显示标签 |
| Position | 设置标签相对于组件的位置 |
| Alignment | 设置标签对齐 |
| Width | 当标签位于组件左侧时，设置标签宽度比 |
| Event Handler | 响应组件事件触发查询、控制组件或调用其他API。 |
| Disabled | 控制组件是否被禁用的状态。 当组件被禁用时，它不能被修改或聚焦。 |
| Read Only | 控制组件是否为只读状态. 一个只读组件可以被选择和集中，但不能被修改。 |
| Show clear button | 设置是否显示清除按钮 |
| Tooltip | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| Required field | 只有当开启开关时才有效。 |
| Choose at least | 设置要选择的最小选项数 |
| Choose up to | 设置要选择的最大选项数 |
| Custom rule | editor.setter_tooltip.custom_rule |
| Hide validation message | 当输入值不正确时，您可以通过切换隐藏状态来隐藏错误消息。 您可以用JavaScript动态地更改隐藏状态。 |
| Form Data Key | 在构建数据属性时指定包装表单组件的键值。 |
| Height | 如何设置适合的高度 |
| Hidden | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
| Theme color | 选择组件的主题颜色 |
方法
您可以使用其他组件来控制组件。 我们支持以下三种方法：
setValue
设置选中的选项，例如{{[“value1”,“value3)…]}}
| 属性 | 描述 |
|---|---|
| Value | 选中选项数组。 |
clearValue
清除选中的选项
validate
验证输入信息是合法的
clearValidate
清除验证消息
事件处理程序
我们支持聆听多选组件的 onChange 事件。
数据
多选组件有一些常用的数据，可以通过应用程序中的 {{componentName.propertyName}} 调用。
| 属性名称 | 描述 |
|---|---|
| value | 选中选项数组 |
使用大小写
接下来，我们将演示如何使用映射模式动态获取选项。
步骤 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 }}
更多
您可以添加或删除选中表中的行来添加或删除选项。