分頁組件：
** 功能：點(diǎn)擊頁面序號可以跳轉(zhuǎn)到相應(yīng)頁面。點(diǎn)擊上一頁或者下一頁，當(dāng)頁面在第一頁時候上一頁無法點(diǎn)擊，頁面在最后一頁時候下一頁無法點(diǎn)擊。一次顯示當(dāng)前頁面的前兩頁和后兩頁。當(dāng)當(dāng)前頁面和第一頁和最后一頁相差三個以上時候出現(xiàn)省略號。始終顯示第一頁和最后一頁，只有一頁的時候顯示一頁。**

Image.png

Image.png

Image.png

代碼如下：
<template>

<div class="pager">
    <button class="btn btn-pager" :disabled="propsData.pageNum == 1" @click="prePage">上一頁</button>
    <span  :class="['page-index',{activ:1 == propsData.pageNum}] " @click="goPage(1)">1</span>
    <span v-if="preClipped" class="page-index">...</span>
    <span v-for="index in pages" :class="['page-index',{activ:index == propsData.pageNum}] " @click="goPage(index)">{{index}}</span>
    <span v-if="backClipped" class="page-index">...</span>
    <span :class="['page-index',{activ:propsData.pages == propsData.pageNum}] " @click="goPage(propsData.pages)">{{propsData.pages}}</span>
    <button class="btn btn-pager" :disabled="propsData.pageNum == propsData.pages" @click="nextPage">下一頁</button>
</div>

</template>
<script type="text/javascript">
export default{
props:['propsData'],
data:function(){
return {
backClipped: true,
preClipped: false
}
},
watch:{
"currentPage" : function(page) {
this.$emit('page-to', page);
},
deep:true
},
methods:{
prePage:function(){
this.propsData.pageNum--
},
nextPage:function(){
this.propsData.pageNum++
},
goPage (index) {
// 跳轉(zhuǎn)到相應(yīng)頁面
if (index !== this.propsData.pageNum) {
this.propsData.pageNum = index
}
}
},
computed:{
// 使用計算屬性來得到每次應(yīng)該顯示的頁碼
pages: function () {
let ret = []
if (this.propsData.pageNum > 3) {
// 當(dāng)前頁碼大于三時，顯示當(dāng)前頁碼的前2個
ret.push(this.propsData.pageNum - 2)
ret.push(this.propsData.pageNum - 1)
if (this.propsData.pageNum > 4) {
// 當(dāng)前頁與第一頁差距4以上時顯示省略號
this.preClipped = true
}
} else {
this.preClipped = false
for (let i = 2; i < this.propsData.pageNum; i++) {
ret.push(i)
}
}
if (this.propsData.pageNum !== this.propsData.pages && this.propsData.pageNum !== 1) {
ret.push(this.propsData.pageNum)
}
if (this.propsData.pageNum < (this.propsData.pages - 2)) {
// 顯示當(dāng)前頁碼的后2個
ret.push(this.propsData.pageNum + 1)
ret.push(this.propsData.pageNum + 2)
if (this.propsData.pageNum <= (this.propsData.pages - 3)) {
// 當(dāng)前頁與最后一頁差距3以上時顯示省略號
this.backClipped = true
}
} else {
this.backClipped = false
for (let i = (this.propsData.pageNum + 1); i < this.propsData.pages; i++) {
ret.push(i)
}
}
// 返回整個頁碼組
return ret
}
}

}

</script>

父組件中如何引用：
<pagation :propsData="pageData" @page-to="loadList"></pagation>
<script>
import pagation from './test'
export default{
data(){
return {
pageData:{
pages : '', //總頁數(shù)
navigatePages : 8, //顯示的導(dǎo)航頁個數(shù)
pageSize : 1, //每頁最多顯示的行數(shù)
pageNum : 1 //當(dāng)前頁
},
};
},
watch:{
'pageData.pageNum':'loadList'
},
components:{
'pagation':pagation
},
methods:{
loadList: function(){
//ajax 請求數(shù)據(jù)
}
}，
mounted:function(){
this.loadList();
}
}
</script>