VUE分页插件 vue-pagination-2

安装

npm install vue-pagination-2

注册全局组件

在main.js 里面导入这个包并注册为全局组件

import Pagination from 'vue-pagination-2'
Vue.component('pagination', Pagination)

页面中使用

<pagination :records="500" @paginate="myCallback"></pagination>

这样就可以最基本的使用了

分页参数 （重点！重点！重点！）

1. records 是总数，这个参数是必须的。

2. per-page 每页显示数目 ，这个可选，默认是25个

3. page 这个是初始页面，默认是第一页

4. options 这个是选项，里面可以包含一些其他参数
   chunk 最大页数 也就是最多显示多少页 默认显示10页
   edgeNavigation 显示第一页和最后一页的链接 默认false 不显示
   theme 主题，用来支持一些css样式，值可以是bootstrap3，bootstrap4等等，默认bootstrap3

5.paginate 可以调用自定义事件。可以在组件上收听并运行您的回调。他会回传一个参数page，为当前页码。可以利用这个参数来进行列表内容的更新。

注意

当总数目少于每页显示数目的时候分页组件会隐藏掉不显示。当初踩了这个坑，想了半天为什么忽然有个display: none 的样式在那里 - -！所以想要显示就叫后台的小伙伴给你多加几条数据给你先试一下看看或者你写死records测试一下。

附上截图 分页组件

代码

组件代码
data里面注册的数据

好了，以上是vue分页插件的基本用法。更加深层的用法我还在摸索，有更好的会继续更新上来。