效果

• 首页
• 第二页
• 第五页
• 最后一页

样式由bootstrap提供

组件

1Vue.component('pagination',{
2    data(){
3        return {
4            pageCount:0,pageRange:[0],
5        };
6    },
7    props:[
8        'total','index','limit','pagerang'
9    ],
10    methods:{
11        jumpTo:function(val){
12            if (this.pageCount >0 && val >= this.pageCount || val < 0 || this.index == val){
13                return
14            }
15            this.index = val;
16            this.$emit('jump',val);
17        },
18        getPageRange:function() {
19            if (this.pageCount<6){
20                this.pageRange = [...Array(this.pageCount).keys()];
21                return
22            }
23            let start = 0;
24            if (this.index > this.pageCount-4){
25                start = this.pageCount - 5;
26            }else if (this.index < 2){
27                start = 0;
28            }else{
29                start = this.index -2;
30            }
31            this.pageRange = new Array(5);
32            for (let i=0;i<5;i++){
33                this.pageRange[i] = start +i;
34            }
35        }
36    },
37    watch:{
38        total:function(val) {
39            this.pageCount = Math.ceil(this.total/this.limit);
40            this.getPageRange();
41        },
42        limit:function(val){
43            this.pageCount = Math.ceil(this.total/this.limit);
44            this.getPageRange();
45        },
46        index:function(val){
47            this.getPageRange();
48        }
49    },
50    template:`
51    <ul class="pagination" style="margin-top: 0%;float: right;" v-if="pageCount>0">
52        <li class="page-item"><span class="page-link" v-on:click="jumpTo(0)">1</span><li>
53        <li class="page-item"><span class="page-link" v-on:click="jumpTo(index-1)">&laquo;</span><li>
54        <li class="page-item" v-for="i in pageRange" v-bind:class="{active: index==i}"><span class="page-link" v-on:click="jumpTo(i)">{{i + 1}}</span><li>
55        <li class="page-item"><span class="page-link" v-on:click="jumpTo(index+1)">&raquo;</span><li>
56        <li class="page-item"><span class="page-link" v-on:click="jumpTo(pageCount-1)">{{pageCount}}</span><li>
57    </ul>
58    `
59})

usage

html

<pagination :limit="itemLimit" :total="itemCount" :index="currentIndex" v-on:jump="jumpTo"></pagination>

app

1methods:{
2    jumpTo:function(index){
3          this.pageJumpTo(index);  
4    },
5}

总结

total 参数是记录未分页前的所有item数量。监听 jump 事件可获取组件页面跳转目标页数。

后台处理的页码是0n，而前端显示是1n+1，主要是为了后端交互方便。