Skip to content

hl-pagination 分页组件

基于 Element Plus 的 el-pagination 二次封装,支持自动滚动、响应式布局等功能,使用 v-model 进行数据双向绑定。

基础用法

使用 v-model:pagev-model:limit 进行页码和每页条数的双向绑定,通过 total 属性设置总条目数。

属性

属性名说明类型可选值默认值
page当前页码number-1
limit每页显示条目个数number-10
total总条目数number--
pageSizes每页显示个数选择器的选项设置number[]-[10, 20, 30, 50]
layout组件布局,子组件名用逗号分隔stringsizes prev pager next jumper total'total, sizes, prev, pager, next, jumper'
pagerCount页码按钮的数量,当总页数超过该值时会折叠number大于等于 5 且小于等于 21 的奇数移动端:5,桌面端:7
autoScroll页码切换后是否自动滚动到顶部boolean-true
hidden是否隐藏分页组件boolean-false
background是否为分页按钮添加背景色boolean-false

事件

事件名说明回调参数
pagination当前页码或每页条数改变时触发{ page: number, limit: number }
update:page当前页码改变时触发新的页码值
update:limit每页条数改变时触发新的每页条数值

插槽

组件支持所有 Element Plus Pagination 组件的插槽。