安裝

npm install vue-pagination-2

注冊(cè)全局組件

在main.js 里面導(dǎo)入這個(gè)包并注冊(cè)為全局組件

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

頁(yè)面中使用

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

這樣就可以最基本的使用了

分頁(yè)參數(shù) （重點(diǎn)！重點(diǎn)！重點(diǎn)！）

1. records 是總數(shù)，這個(gè)參數(shù)是必須的。

2. per-page 每頁(yè)顯示數(shù)目 ，這個(gè)可選，默認(rèn)是25個(gè)

3. page 這個(gè)是初始頁(yè)面，默認(rèn)是第一頁(yè)

4. options 這個(gè)是選項(xiàng)，里面可以包含一些其他參數(shù)
   chunk 最大頁(yè)數(shù) 也就是最多顯示多少頁(yè) 默認(rèn)顯示10頁(yè)
   edgeNavigation 顯示第一頁(yè)和最后一頁(yè)的鏈接 默認(rèn)false 不顯示
   theme 主題，用來(lái)支持一些css樣式，值可以是bootstrap3，bootstrap4等等，默認(rèn)bootstrap3

5.paginate 可以調(diào)用自定義事件?？梢栽诮M件上收聽并運(yùn)行您的回調(diào)。他會(huì)回傳一個(gè)參數(shù)page，為當(dāng)前頁(yè)碼?？梢岳眠@個(gè)參數(shù)來(lái)進(jìn)行列表內(nèi)容的更新。

注意

當(dāng)總數(shù)目少于每頁(yè)顯示數(shù)目的時(shí)候分頁(yè)組件會(huì)隱藏掉不顯示。當(dāng)初踩了這個(gè)坑，想了半天為什么忽然有個(gè)display: none 的樣式在那里 - -！所以想要顯示就叫后臺(tái)的小伙伴給你多加幾條數(shù)據(jù)給你先試一下看看或者你寫死records測(cè)試一下。

附上截圖

分頁(yè)組件

代碼

組件代碼

data里面注冊(cè)的數(shù)據(jù)

好了，以上是vue分頁(yè)插件的基本用法。更加深層的用法我還在摸索，有更好的會(huì)繼續(xù)更新上來(lái)。