组件
Vue.component('pagination',{
data(){
return {
pageCount:0
};
},
props:[
'total','index','limit'
],
methods:{
jumpTo:function(val){
this.index = val;
this.$emit('jump',val);
},
},
watch:{
total:function(val) {
this.pageCount = Math.ceil(this.total/this.limit);
},
limit:function(val){
this.pageCount = Math.ceil(this.total/this.limit);
}
},
template:`
<ul class="pagination" style="margin-top: 0%;float: right;" v-if="pageCount>0">
<li class="page-item" v-if="index>0"><span class="page-link" v-on:click="jumpTo(index-1)">«</span><li>
<li class="page-item" v-if="index>2"><span class="page-link" v-on:click="jumpTo(0)">1</span><li>
<li class="page-item" v-if="index>3"><span class="page-link">…</span><li>
<li class="page-item" v-if="index>1"><span class="page-link" v-on:click="jumpTo(index-2)">{{index-1}}</span><li>
<li class="page-item" v-if="index>0"><span class="page-link" v-on:click="jumpTo(index-1)">{{index}}</span><li>
<li class="page-item active" v-if="index>=0"><span class="page-link" >{{index + 1}}</span><li>
<li class="page-item" v-if="index < pageCount-1"><span class="page-link" v-on:click="jumpTo(index+1)">{{index + 2}}</span><li>
<li class="page-item" v-if="index < pageCount-2"><span class="page-link" v-on:click="jumpTo(index+2)">{{index + 3}}</span><li>
<li class="page-item" v-if="index < pageCount-4"><span class="page-link">…</span><li>
<li class="page-item" v-if="index < pageCount-3"><span class="page-link" v-on:click="jumpTo(pageCount-1)">{{pageCount}}</span><li>
<li class="page-item" v-if="index < pageCount-1"><span class="page-link" v-on:click="jumpTo(index+1)">»</span><li>
</ul>
`
})
usage
html
<pagination :limit="itemLimit" :total="itemCount" :index="currentIndex" v-on:jump="jumpTo"></pagination>
app
methods:{
jumpTo:function(index){
this.pageJumpTo(index);
},
}
总结
total 参数是记录未分页前的所有item数量。监听 jump 事件可获取组件页面跳转目标页数。
后台处理的页码是0~n,而前端显示是1~n+1,主要是为了后端交互方便。