vue 搭建的前端項目，需要用到分頁插件，在github 上搜索，樣式都比較簡單，不太符合要求，終於找到一個整體不錯的插件
地址：https://terryz.gitee.io/vue/#/page/demo
文檔也蠻詳細，但入參除了語言，樣式，總條數，每頁顯示條數外沒有其他入參，這個比較頭大（語言啥這些自己也不需要）；
因爲我的列表頁有很多篩選條件，點擊其他篩選條件，當前頁應該回到第一頁，而不是停留在上次點擊的頁數，入參需要增加當前頁控制（即點擊篩選條件，返回第一頁），因爲水平有限，本來想在原來插件基礎上加以修改，但擔心影響v-page這個module（自己不清楚是怎樣集成爲模塊的），乾脆自己把格式代碼粘出來，重新寫了一個分頁組件，方便使用（基本上是原來代碼，只是稍加修改）；
修改後原碼如下
一、v-page組件內容如下：
<template>
<div class="page">
<ul>
<li class="disabled vPaginationList">
<a>每頁記錄數
<select @change="switchLength" v-model="pageSize">
<option v-for="len in lengthList">{{len}}</option>
</select>
</a>
</li>
<li class="disabled bPageInfo">
<a>當前顯示第{{currentPage}}/{{totalPage}}頁(共{{totalRow}}條記錄)</a>
</li>
<li :class="{disabled:currentPage === 1,bPageControlButton:true}">
<a href="javascript:void(0);" @click="switchPage('first')">首頁</a>
</li>
<li :class="{disabled:currentPage === 1,bPageControlButton:true}">
<a href="javascript:void(0);" @click="switchPage('previous')">«</a>
</li>
<li :class="{active:(num === currentPage)}" v-for="num,index in pageNumbers">
<a href="javascript:void(0);" @click="switchPage(num)">{{num}}</a>
</li>
<li :class="{bPageControlButton:true,disabled:currentPage === totalPage}">
<a href="javascript:void(0);" @click="switchPage('next')">»</a>
</li>
<li :class="{bPageControlButton:true,disabled:currentPage === totalPage}">
<a href="javascript:void(0);" @click="switchPage('last')" >尾頁</a>
</li>
</ul>
</div>
</template>
<script>
import con from './constant';
let defaults = con;
export default {
name: "v-page",
props:['setconfig'],
data(){
let config = Object.assign({}, defaults, this.setconfig);
return {
config:config,
lengthList:config.pageSizeMenu,
pageNumber: 1,
pageSize: config.pageSizeMenu&&Array.isArray(config.pageSizeMenu)&&config.pageSizeMenu.length?config.pageSizeMenu[0]:10,
totalRow: config.totalRow,
totalPage: 0,
currentPage:config.pageNumber,
pageNumberSize: 5
};
},
computed:{
pageNumbers: function(){
let start, end, nums = [], pNum = this.currentPage, half = Math.floor(this.pageNumberSize / 2);
if(this.totalPage < this.pageNumberSize) {
start = 1;
end = this.totalPage;
} else if ( pNum <= half ) {
start = 1;
end = this.pageNumberSize;
} else if ( pNum >= (this.totalPage - half) ) {
start = this.totalPage - this.pageNumberSize + 1;
end = this.totalPage;
} else {
start = pNum - half;
end = start + this.pageNumberSize - 1;
}
for(let i = start;i <= end; i++){
nums.push(i);
}
return nums;
}
},
watch:{
currentPage:function(val){
this.goPage(val);
},
'setconfig.totalRow':{
handler:function(newVal,oldval){
this.totalRow = newVal;
this.calcTotalPage();
},
deep:true
},
'setconfig.pageNumber':{
handler:function(newVal,oldval){
if(newVal==1){
console.log(newVal);//監聽當前頁，只要爲1即返回首頁
this.goPage(1);
}
},
deep:true
}
},
methods:{
goPage(pNum){
console.log({
pageNumber: pNum,
pageSize: Number(this.pageSize),
})
this.currentPage = pNum;
this.$emit('number-emit',{
pageNumber: pNum,
pageSize: Number(this.pageSize),
});
this.calcTotalPage();
},
calcTotalPage(){
this.totalPage = Math.ceil(this.totalRow / this.pageSize);
},
switchPage(pNum){
if(typeof(pNum) === 'string'){
switch (pNum){
case 'first':
if(this.currentPage!==1) this.currentPage = 1;
break;
case 'previous':
if(this.currentPage!==1) this.currentPage--;
break;
case 'next':
if(this.currentPage!==this.totalPage) this.currentPage++;
break;
case 'last':
if(this.currentPage!==this.totalPage) this.currentPage = this.totalPage;
break;
}
}else if(typeof(pNum) === 'number'){
this.currentPage = pNum;
}
},
switchLength(){
this.goPage(1);
}
},
mounted(){
this.goPage(1);
}
}
</script>
<style scoped>
/*分頁樣式*/
.page>ul{
display: inline-block;
margin-bottom: 0;
margin-left: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
padding: 0;
}
.page>ul>li{
/*margin: 0;*/
/*border: 1px solid #ddd;
border-radius: 0;
padding: 6px 12px;*/
/*display:inline;
height:20px;
line-height: 20px;*/
text-align: center;display: inline;box-sizing: border-box;margin: 0;
}
.page>ul>li>a{
margin: 0;
border: 1px solid #dddddd;
border-radius: 0;
padding: 6px 12px;
line-height: 20px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: white;
float: left;
text-decoration: none;
border-left-width: 0;
box-sizing: content-box;
color: black;
-webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
transition: all .5s cubic-bezier(.175,.885,.32,1);
}
.page>ul>li>a:hover {
box-shadow: 0 0 12px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 12px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.2);
}
.page>ul>li.disabled > a {
color: #999999;cursor: default;
}
.page>ul>li:hover {
color: #999999;background-color: white;box-shadow: none;
}
.page>ul>li.active > a,.page>ul>li.active > span {
cursor: default;color: #999999;background-color: #EEEEEE;
}
.page>ul>li.active > a:hover,.page>ul>li.active > span:hover{
box-shadow: none;
}
.page>ul>li:first-child > a{
border-left-width: 1px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-topleft: 2px;
}
.page>ul>li:last-child > a{
border-left-width: 1px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-topleft: 2px;
}
</style>
二、constant.js
const defaults = {
totalRow: 0,
pageSizeMenu: [10,20,50,100],
};
export default {
defaults
}
三、引入分頁的vue
<vpageM :setconfig="setPage" @number-emit="numberEmit" style="padding-bottom:20px;"></vpageM>
import vpageM from '@/components/riskPre-warning/vpageM/vpageM';
setPage:{
totalRow: 44,
pageSizeMenu: [5], // 初始數據
pageNumber:2
},
components:{
vpageM
},
numberEmit(pInfo){
this.setPage.pageNumber = pInfo.pageNumber;
this.pageNumber = pInfo.pageNumber;
this.pageSize = pInfo.pageSize;
}
大體就這些嘍