自定义传入：

当前页数（current），默认为1

每页条数（pageSize），默认为10

只有一页时是否隐藏分页（hideOnSinglePage），默认为false

数据总数（total），默认为0

显示的页码数组长度（pageListNum），默认为5

是否可以快速跳转至某页（showQuickJumper），默认为false

是否显示当前页数和数据总量（showTotal），默认为false

分页器展示位置，靠左left，居中center，靠右right（placement），默认为'right'

效果图如下：

鼠标悬浮时切换为箭头：

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

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

@change="changePage"

:current="pagination.p"

:pageSize="pagination.pageSize"

:total="total"

:hideOnSinglePage="hideOnSinglePage"

:showQuickJumper="true"

:showTotal="true"

placement="right"

v-if="pagination && total" />

import Pagination from '@/components/Pagination'

components: {

Pagination

}

hideOnSinglePage: false,

total: 0,

pagination: {

pageSize: 10,

p: 1

}

changePage (pager) { // 分页器回调

this.$emit('change', pager)

}