下拉多选

更新时间:
复制 MD 格式

使用场景

当需要在限定的可选项内进行多项选择时,您可以使用下拉多选组件。

使用说明

  • 在某个容器内或整个页面内拖入下拉多选组件。

  • 组件的数据源支持固定数据源及动态数据源。数据源类型需为List<Structure>,Structure为结构对象类型。List中的每个数据对应着下拉选项中每个数据。

    • 当数据源为固定值时,您可按需进行添加、编辑和删除操作。

    • 当数据源为动态值时,支持绑定List<Structure>类型的变量。

使用示例

说明

本文以已存在可绑定变量,无需新增变量为例说明。

  1. 组件面板拖拽下拉多选组件至画布。新增变量对话框中,单击image图标。组件添加成功后,右侧显示属性面板,包含绑定变量标题标题位置提示信息描述文字尺寸状态等配置项。

  2. 绑定变量,即给下拉多选绑定初始值。在右侧属性面板的对应下拉框中选择目标变量。

  3. 配置提示信息(展示在下拉多选框中的提示文字)。在右侧属性面板的对应输入框中输入内容,画布中组件的占位符文字将同步更新。

  4. 配置描述文字(对下拉多选进行修饰说明的文字)。在属性面板的对应输入框中输入内容后,组件下方将同步显示该文字。

  5. 配置选项配置,其选项来源支持固定值动态值

    • 固定值:您可单击编辑数据,在数据编辑对话框中,按需进行添加、编辑与删除操作。对话框中以 JSON 格式展示选项数据,每项包含 displayName(显示名称)和 value(实际值)两个字段。

    • 动态值:您需要绑定一个类型为List<Structure>类型的变量,其中Structure为下拉多选中每项数据对应的类型。此时属性面板中显示选项列表数据选项显示值选项实际值三个下拉框,需分别配置对应的字段映射。

  6. 配置其他配置。该区域包含以下配置项:最多选中数量(数值输入框)、显示清除按钮(开关)、是否可搜索(开关)、搜索结果为空文案(文本输入框)和本地搜索过滤(开关)。下方还有自定义本地搜索过滤方法区域和绑定动作按钮。

    • 当开启清除按钮后,您可以一键清除选中的内容。此时组件输入框右侧出现X清除图标。

    • 当开启搜索功能后,您可以在下拉多选框中输入您想搜索的内容,下拉多选框会根据你输入的内容显示过滤结果。搜索框内嵌于下拉输入框中,输入关键词后下方列表实时过滤显示匹配选项。

    • 设置搜索结果为空的文案,当您搜索的关键字不存在对应匹配项时下拉框中会给出对应的提示。无匹配结果时,下拉框中以红色文字显示已设置的提示文案。

    • 如果选项来源设置为动态值,您需要关闭本地搜索过滤开关。

      如果选项来源设置为固定值,您可以自定义本地搜索过滤方法。单击绑定动作,在自定义本地搜索过滤方法对话框中,您可以选择在页面JS全局JS中输入对应的方法。对话框左侧选择响应动作类型,右侧动作名称输入框设置方法名,代码编辑区域提供默认的过滤函数模板,接收 value(搜索关键字)和 data(行数据)两个参数。

  7. 配置校验

    • 开启校验必填开关,设置校验未通的提示信息。您还可以设置最大个数校验最小个数校验等。每项校验规则均配有独立开关、数值输入框和提示信息输入框,可按需组合启用。

    • 您可以开启自定义校验开关,按需编辑校验代码。开启后,代码编辑区域显示校验函数模板,函数接收 value(组件当前输入值)和 callback 两个参数,通过 callback 返回校验错误信息或调用 callback() 表示校验通过。