# 设置UI引擎前端页面弹出编辑组件属性
弹出编辑组件适用于弹窗面板选择数据的场景（如设备参数选择、工单信息选取、物料编码匹配等），替代手动输入方式，确保数据录入的准确性和规范性。
#### 前提条件
已在当前页面添加"弹出编辑"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"弹出编辑"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503567324.png)，即可展开"属性"设置面板。
 
#### 基础信息
| 属性名称 | 说明                                                                        | 是否支持变量绑定 |
|:---|:---|:---|
| 绑定值  | 组件的双向绑定值，存储从弹窗面板中选中的数据，是组件提交给表单/业务逻辑的核心值。                                 | 是        |
| 占位文本 | 未选择数据时，组件输入区域显示的提示文本（如"请选择设备编号"），适配工业场景数据选择引导需求。                          | 是        |
| 清除按钮 | 是否在组件右侧显示清除按钮。开启后可一键清空已选中的数据，提升快速重置选择的效率。                                 | 是        |
| 禁用   | 控制组件是否处于禁用状态。禁用后无法点击组件打开弹窗、无法修改已选数据。                                      | 是        |
| 文本字段 | 组件界面展示给用户的文本对应的字段名称（如表格数据中"deviceName"字段为设备名称，配置此字段后组件显示该字段值）。            | 是        |
| 值字段  | 组件实际绑定/传递的数值对应的字段名称（如表格数据中"deviceId"字段为设备唯一标识，配置此字段后绑定值为该字段值），保证数据传递的准确性。 | 是        |
   
#### 弹框面板
弹框面板是组件核心交互区域，用于展示可选数据列表。
| 属性名称   | 说明                                                                                                                                                                                                                                                                                                                                                                                        | 是否支持变量绑定 |
|:---|:---|:---|
| 宽度     | 弹框非遮罩层内容容器的宽度，单位为像素（px）。                                                                                                                                                                                                                                                                                                                                                                  | 是        |
| 面板表格配置 | 弹窗内表格的核心配置项，为JSON对象格式，必须包含两个属性： - columns：表格列配置（如列名、字段映射、宽度等）。  - data：表格展示的数据源（如设备、工单、物料等结构化数据）。   | 是        |
| 过滤条件   | 设置弹窗面板内的表单查询项，用于快速筛选表格数据（如按设备类型、工单状态过滤），适配海量数据检索需求。                                                                                                                                                                                                                                                                                                                                       | 是        |
| 启用分页   | 是否显示表格分页器。 开启后支持分页展示数据。需配合组件的分页切换事件（onPageChange）使用。                                                                                                                                                                                                                                                                                      | 是        |
| 分页配置   | 设置分页器的具体配置项。配置规则请参见[设置UI引擎前端页面分页组件属性](https://support.huaweicloud.com/usermanual-idme/idme_ui_0055.html)。                                                                                                                                                                                                                                                                                 | 是        |
| 多选     | 弹窗表格是否启用多选模式。 - 开启：可选择多条数据（如批量选择工单）。  - 关闭：仅支持单选（如选择单台设备）。默认关闭。                          | 是        |
   
#### 其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
   
#### 组件事件
| 事件名称                | 类型定义                                                  | 说明                                                                                                                                                                                                                                                                                                                                                           |
|:---|:---|:---|
| onChange            | ``` (index: Number, selectedData: Object) => void ``` | 选中数据变更时触发： - index：选中数据在数据源中的索引。  - selectedData：选中的完整数据对象。   |
| onUpdate:modelValue | ``` (data: Object) => void ```                        | 双向绑定值更新时触发，参数为即将更新的绑定值（值字段对应的内容）。                                                                                                                                                                                                                                                                                                                            |
| onClose             | ``` () => void ```                                    | 弹窗面板关闭时触发，可用于执行关闭后的收尾逻辑（如数据校验）。                                                                                                                                                                                                                                                                                                                              |
| onPageChange        | ``` (page: Number) => void ```                        | 弹窗表格分页切换时触发，参数为切换后的页码，需配合分页配置实现数据加载。                                                                                                                                                                                                                                                                                                                         |
| onClick             | ``` (e: MouseEvent) => void ```                       | 组件被单击时触发（未禁用状态下），为原生浏览器事件。                                                                                                                                                                                                                                                                                                                                   |
| onFocus             | ``` (e: MouseEvent) => void ```                       | 组件获得焦点时触发，为原生浏览器事件。                                                                                                                                                                                                                                                                                                                                          |
| onMousemove         | ``` (e: MouseEvent) => void ```                       | 鼠标在组件区域移动时触发，为原生浏览器事件。                                                                                                                                                                                                                                                                                                                                       |