Vue3分页器(Pagination)

可自定义设置以下属性:

  • 当前页数(current),必传,类型:number,默认 1

  • 每页条数(pageSize),必传,类型:number,默认 10

  • 数据总数(total),必传,类型:number,默认 0

  • 显示的页码数组长度(pageListNum),类型:number,默认 5

  • 只有一页时是否隐藏分页器(hideOnSinglePage),类型:boolean,默认 false

  • 是否可以快速跳转至某页(showQuickJumper),类型:boolean,默认 false

  • 是否显示当前页数和数据总量(showTotal),类型:boolean,默认 false

  • 分页器展示位置,靠左left,居中center,靠右right(placement),类型:string,默认 'center'

效果如下图:

Vue3分页器(Pagination)_第1张图片

 鼠标悬浮时切换为箭头:

①创建自定义分页组件Pagination.vue:




②在要使用的页面引入分页器:





你可能感兴趣的:(vue3,ts,less,vue,typescript,less)