设置UI引擎前端页面分页组件属性

分页组件用于处理大数据量的分段展示场景，可将设备列表、生产报表、运维记录等海量工业数据拆解为多页展示，降低前端渲染压力、提升数据浏览效率。该组件常与表格组件配合使用，也可独立应用于其他需分页的数据展示场景（如工艺参数台账、工单记录列表）。

已在当前页面添加“分页”组件，具体操作请参见为UI引擎前端页面添加物料组件。

属性名称	说明	是否支持变量绑定
当前页数	分页组件当前显示的页码。	是
每页条数	单页展示的最大数据条数。	是
可选每页条数	配置用户可选择的每页条数选项（如“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”属性，用于注册模板引用以访问组件实例方法。如果为“数据源表单”组件，会自动填充默认值。	是

属性名称

说明

是否支持变量绑定

元素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	浏览器原生事件，鼠标在组件区域内移动时触发。