下拉单选

使用场景

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

使用说明

在某个容器内或整个页面内拖入下拉单选组件，需要绑定一个类型为List<Structure>类型的变量，其中Structure为下拉单选中每项数据对应的类型。

使用示例

1. 从组件面板拖拽下拉单选组件至画布。在新增变量对话框中，单击图标。右侧属性面板显示组件的可配置项，包括绑定变量、标题、标题位置、提示信息和描述文字等。

2. 绑定变量，即给下拉单选绑定初始值。在右侧属性面板的绑定变量下拉框中，选择目标变量（如displayName）。

3. 配置提示信息（展示在下拉单选框中的提示文字）。在右侧属性面板的提示信息输入框中输入文字即可，画布中的组件会同步预览效果。

4. 配置描述文字（对下拉单选进行修饰说明的文字）。在右侧属性面板的描述文字输入框中输入文字即可，画布中的组件会同步预览效果。

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

   • 固定值：您可单击编辑数据，在数据编辑对话框中，按需进行添加、编辑与删除操作。对话框中以 JSON 格式展示选项数据，每项包含 displayName（显示名称）和 value（实际值）两个字段。右侧选项配置区域的标题对应 displayName 字段，选中值对应 value 字段。

   • 动态值：您需要绑定一个类型为List<Structure>类型的变量，其中Structure为下拉单选组件中每项数据对应的类型。此时右侧选项配置区域显示选项列表数据、选项显示值和选项实际值三个下拉配置项，需分别绑定对应的变量字段。

6. 配置其他配置。该区域包含以下选项：显示清除按钮（开关）、是否可搜索（开关）、搜索结果为空文案（输入框，默认为“没找到想要的结果”）、本地搜索过滤（开关），以及自定义本地搜索过滤方法入口。

   • 当开启清除按钮后，您可以一键清除选中的内容。

   • 当开启搜索功能后，您可以在下拉单选框中输入您想搜索的内容，下拉单选框会根据你输入的内容显示过滤结果。

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

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

     如果选项来源设置为固定值，您可以自定义本地搜索过滤方法。单击绑定动作，在自定义本地搜索过滤方法对话框中，您可以选择在页面JS或全局JS中输入对应的方法。函数接收 value（搜索关键字）和 data（行数据）两个参数，返回 Boolean 值决定是否保留该选项。

7. 配置校验。

   • 开启校验必填开关，设置校验未通的提示信息。默认提示文案为“此项必填”，可按需修改。

   • 您可以开启自定义校验开关，按需编辑校验代码。开启后，下方显示代码编辑区域，函数接收 value（组件当前输入值）和 callback 两个参数，校验不通过时调用 callback("错误提示") 返回错误信息，通过时调用 callback() 即可。单击编辑代码按钮可进入编辑器。