Vue3分页器（Pagination）
迪丽瓦拉
2024-05-30 18:02:30
0次
自定义传入：
- 当前页数（current），默认为1
- 每页条数（pageSize），默认为10
- 只有一页时是否隐藏分页器（hideOnSinglePage），默认为false
- 数据总数（total），默认为0
- 显示的页码数组长度（pageListNum），默认为5
- 是否可以快速跳转至某页（showQuickJumper），默认为false
- 是否显示当前页数和数据总量（showTotal），默认为false
- 分页器展示位置，靠左left，居中center，靠右right（placement），默认为'right'
效果图如下：
鼠标悬浮时切换为箭头：
①创建自定义分页组件Pagination.vue：
共 {{ totalPage }} 页 / {{ total }} 条1 1"@click="onForward"@mouseenter="forwardArrow = true"@mouseleave="forwardArrow = false">•••{{ page }}•••{{ totalPage }}跳至页
②在要使用的页面引入分页器：