# 设置UI引擎前端页面下拉框组件属性
在UI引擎前端项目开发中，当下拉框组件需要弹出下拉列表进行数据选择时，需进行组件属性设置。
#### 前提条件
已在当前页面添加"下拉框"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"下拉框"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535447137.png)，即可展开"属性"设置面板。
 
#### 基础属性
| 属性名称   | 说明                                                                                                            | 是否支持变量绑定 |
|:---|:---|:---|
| 绑定值    | 选中选项时绑定的实际值，需结合状态变量实现动态更新。可用于绑定设备ID、物料编码、工艺参数值等实际业务数据。                                                        | 是        |
| 占位文本   | 未选择时的提示文本，如"请选择设备型号"、"请选择工艺路线"等。                                                                              | 是        |
| 清除按钮   | 是否启用一键清除功能。 启用后，当选中选项且鼠标悬浮在组件上时，会在右侧显示一个清除按钮。                    | 是        |
| 文本字段   | 渲染显示文本对应的字段名称，默认为"label"。可设置为设备名称、物料名称、工序名称等显示字段。                                                             | 是        |
| 值字段    | 传递给绑定值对应的字段，默认为"value"。可设置为设备编码、物料编号、工序代码等。                                                                   | 是        |
| 下拉可搜索  | 是否启用下拉面板搜索功能。数据量较大时建议启用，如设备库、物料库选择场景。                                                                         | 是        |
| 禁用     | 是否禁用组件。                                                                                                       | 是        |
| 虚拟滚动   | 是否开启大数据虚拟滚动功能。适用于大型设备列表（如1000条以上）选择场景。 **注意：**开启后，"下拉可搜索"将不可用。 | 是        |
| 选项数据   | 组件的选项数据，值为对象数组格式。                                                                                             | 是        |
| 多选     | 是否启用多选功能。适用于多设备关联、多工艺参数选择等场景。                                                                                 | 是        |
| 是否显示全选 | 当开启多选时，是否在下拉面板中显示全选按钮。                                                                                        | 是        |
   
#### 其他
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
| 最大可选值  | 在多选模式下限制最多可选择的个数，默认不限制。如果输入为0，则同样不限制。可用于限制工艺参数最大选择数量，防止误操作。                                                                        | 是        |
| 下拉框类名  | 自定义下拉框的类名，用于自定义样式。可设置固定宽度、高度适应工业界面布局。                                                                                              | 是        |
| 多选折叠显示 | 在多选模式下，是否将多个标签折叠显示。仅适用于多选场景。                                                                                                       | 是        |
   
#### 组件事件
| 事件名称                | 类型定义                                         | 说明                                                                                                           |
|:---|:---|:---|
| onChange            | ``` (value: IValue, list?: List) => void ``` | 监听绑定值变更事件。                                                                                                   |
| onUpdate:modelValue | ``` (value: IValue) => void ```              | 双向绑定值更新时触发。                                                                                                  |
| onBlur              | ``` (e: MouseEvent) => void ```              | 监听输入框失去焦点事件。                                                                                                 |
| onFocus             | ``` (e: Event) => void ```                   | 元素获得焦点时触发。 传递标准的浏览器"Event"或"MouseEvent"对象，适用于输入框等表单元素。        |
| onClear             | ``` () => void ```                           | 监听一键清除事件。                                                                                                    |
| onRemoveTag         | ``` (tag:string|number) => void ```          | 监听多选时移除标签事件。                                                                                                 |
| onClick             | ``` (e: MouseEvent) => void ```              | 浏览器事件，点击组件时触发。                                                                                               |
| onMousemove         | ``` (e: Event) => void ```                   | 鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。 |
   
Change事件参数类型参考：
```
type IValue = string | number | Array<string | number>;
type List = Option[];
interface Option {
    label: string;      // 显示文本
    value: any;         // 实际值
    disabled?: boolean; // 是否禁用该选项
}
```
#### 组件实例方法
| 方法名称  | 类型定义               | 说明        |
|:---|:---|:---|
| blur  | ``` () => void ``` | 使输入框失去焦点。 |
| focus | ``` () => void ``` | 使输入框获取焦点。 |
   
访问组件实例使用方法：
```
this.$('ref引用类').blur(); // 使组件失去焦点
this.$('ref引用类').focus(); // 使组件获取焦点
```
![](https://support.huaweicloud.com/usermanual-idme/public_sys-resources/caution_3.0-zh-cn.png)
组件实例只能在JS面板中访问。