# 设置UI引擎前端页面分页组件属性
分页组件用于处理大数据量的分段展示场景，可将设备列表、生产报表、运维记录等海量工业数据拆解为多页展示，降低前端渲染压力、提升数据浏览效率。该组件常与表格组件配合使用，也可独立应用于其他需分页的数据展示场景（如工艺参数台账、工单记录列表）。
#### 前提条件
已在当前页面添加"分页"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"分页"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535567143.png)，即可展开"属性"设置面板。
 
#### 基础信息
| 属性名称   | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 当前页数   | 分页组件当前显示的页码。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 是        |
| 每页条数   | 单页展示的最大数据条数。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 是        |
| 可选每页条数 | 配置用户可选择的每页条数选项（如"10,20,50,100"），用于分页大小选择器。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 是        |
| 总条数    | 需分页展示的数据总数量（如1000条设备记录）。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 是        |
| 布局     | 分页器元素的显示及排列顺序，元素名称用英文逗号（,）分隔。可选元素： - total：总条数  - sizes：分页大小切换  - prev：前一页  - pager：页码  - next：后一页   **注意：**配置为"total"时会固定显示在左侧。默认值为"total, sizes, prev, pager, next"。 | 是        |
   
#### 其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
   
#### 组件事件
| 事件名称            | 类型定义                                  | 说明                                                                             |
|:---|:---|:---|
| onCurrentChange | ``` (currentPage: number) => void ``` | 当前页码发生改变时触发，参数为最新的页码值。                                                         |
| onSizeChange    | ``` (pageSize: number) => void ```    | 每页显示条数修改后触发，参数为新的每页条数。                                                         |
| onPrevClick     | ``` (currentPage: number) => void ``` | 单击"上一页"按钮并完成页码切换后触发，参数为切换后的页码。                                                 |
| onNextClick     | ``` (currentPage: number) => void ``` | 单击"下一页"按钮并完成页码切换后触发，参数为切换后的页码。                                                 |
| onClick         | ``` (e: MouseEvent) => void ```       | 浏览器原生事件，单击分页组件任意区域均会触发。                                                        |
| onChange        | ``` (e: MouseEvent) => void ```       | 浏览器原生事件，元素值改变时触发。 此事件对分页组件无效。    |
| onFocus         | ``` (e: MouseEvent) => void ```       | 浏览器原生事件，组件获取焦点时触发。 此事件对分页组件无效。 |
| onMousemove     | ``` (e: MouseEvent) => void ```       | 浏览器原生事件，鼠标在组件区域内移动时触发。                                                         |