vue2.0分頁組件，

pagination.vue

<!-- 表格分頁組件 -->
<template>
    <nav class="boot-nav">
        <ul class="pagination boot-page">
            <li>
                <a href="javascript:void(0)"  @click="wholePrevClick()">
                    <span aria-hidden="true">第一頁</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" aria-label="Previous" @click="onPrevClick()">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="(page, index) in pages" :class="activeNum === index ? 'active' : ''">
                <a href="javascript:void(0)" v-text="page" @click="onPageClick(index)"></a>
            </li>
            <li>
                <a href="javascript:void(0)" aria-label="Next" @click="onNextClick()">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)"  @click="wholeNextClick()">
                    <span aria-hidden="true">最後一頁</span>
                </a>
            </li>
        </ul>
        <div class="page-total">
            共 <span v-text="pageTotal"></span> 頁
        </div>
    </nav>
</template>

<script>
export default {
    props: {
        
        // 每頁顯示個數
        len: {
            type: Number,
            default: 2
        },
        // 表格數據（數組）
        data: {
            type: Array,
            default: function () {
                return []
            }
        },
        // AJAX地址
        url: {
            type: String,
            default: ''
        },
        //當前頁的字段
        currentPage: {
            type: String,
            default: ''
        },
        totalPages: {
            type: String,
            default: ''
        },
        totalName: {
            type: String,
            default: ''
        },
        // 顯示頁數
        pageLen: {
            type: Number,
            default: 10
        },
        
        // 參數內容
        param: {
            type: Object,
            default: function () {
                return {}
            }
        },
        //method
        method:{
            type:String,
            default:'get'
        }
    },
    data () {
        return {
            // 頁碼
            pages: {
                type: Array,
                default: function () {
                    return [1]
                }
            },
            // 總頁數
            pageTotal: {
                type: Number,
                default: 1
            },
            activeNum: 0,
            first: -1,
            last: -1
        }
    },
    methods: {
        // 第一頁
        wholePrevClick: function() {
            this.first = 1;
            var newPages = [];
            for (let i = 0; i < this.pages.length; i++) {
                newPages[i] = i +1;
            }
            this.pages = newPages;
            this.activeNum = 0;
            this.getData();
        },
        // 最後一頁
        wholeNextClick: function() {
            this.last = this.pageTotal;
            var newPages = [];
            for (let i = 0; i < this.pages.length; i++) {
                newPages[this.pages.length-i-1] = this.pageTotal-i;
            }
            this.pages = newPages;
            this.activeNum = this.pages.length-1;
            this.getData();
        },
        pageMake: function(index) {
            let newPages = [];
            let len2 = parseInt(this.pages.length/2);
            if(this.pages[index] <= len2 || this.pageTotal <= this.pageLen || this.pages[index] > this.pageTotal-len2) {
                for (let i = 0; i < this.pages.length; i++) {
                    newPages[i] = this.pages[i];
                }
                this.activeNum = index;
            }else if( this.pages[index] <= this.pageTotal-len2) {
                for (let i = 0; i < this.pages.length; i++) {
                    newPages[i] = this.pages[index]-len2+i;
                }
                this.activeNum = len2;
            }
            this.pages = newPages;
            this.getData();
        },
        // 點擊頁碼刷新數據
        onPageClick (index) {
            this.pageMake(index);
        },
        // 上一頁
        onPrevClick () {
            // 當前頁是否爲當前最小頁碼
            if (this.activeNum > 0) {
                // this.activeNum = this.activeNum - 1;
                let index = this.activeNum -1;
                this.pageMake(index);
            } else {
                if (this.pages[0] !== 1) {
                    let newPages = []
                    for (let i = 0; i < this.pages.length; i++) {
                        newPages[i] = this.pages[i] - 1
                    }
                    this.pages = newPages
                    this.getData()
                }
            }
        },
        // 下一頁
        onNextClick () {
            // 當前頁是否爲當前最大頁碼
            if (this.activeNum < this.pages.length - 1) {
                // this.activeNum = this.activeNum + 1
                let index = this.activeNum + 1;
                this.pageMake(index);
            } else {
                if (this.pages[this.pages.length - 1] < this.pageTotal) {
                    let newPages = []

                    for (let i = 0; i < this.pages.length; i++) {
                        newPages[i] = this.pages[i] + 1
                    }
                    this.pages = newPages
                    this.getData()
                }
            }
        },
        // 獲取頁碼
        getPages () {
            this.pages = []
            // 比較總頁碼和顯示頁數
            if (this.pageTotal <= this.pageLen) {
                //console.log(this.pageTotal+"....."+this.pageLen)
                for (let i = 1; i <= this.pageTotal; i++) {
                    this.pages.push(i)
                }
            } else {
                for (let i = 1; i <= this.pageLen; i++) {
                    this.pages.push(i)
                }
            }
        },
        // 頁碼變化獲取數據
        getData () {
            var _self = this;
            this.param[_self.currentPage] = this.pages[_self.activeNum];
            if( this.first!= -1) {
                this.param[_self.currentPage] = this.first;
                this.first = -1;
            }else if (this.last != -1) {
                this.param[_self.currentPage] = this.last;
                this.last = -1;
            }
            this.$nextTick(function(){
                var _self = this;
                var param = _self.param;
                this.$http.get( _self.url, {params: param},
                ).then(function(data) {
                    var data = data.body.data;
                    _self.pageTotal = data.totalPage;
                    data = data.data;
                    if (_self.pages.length !== _self.pageLen || _self.pageTotal < _self.pageLen) {
                        _self.getPages();
                    }   
                    _self.$store.commit('changeRenderData',{data})
                })
            });
        },
        refresh () {
            this.pages = [1]

            this.activeNum = 0

            this.getData()
        }
    },
    created() {
        this.refresh();
        this.getData();
        this.getPages();
    }
}

</script>

<style scoped>
.boot-select {
    float: left;
    width: 80px;
}

.boot-nav {
    float: right;
}

.boot-page {
    display: inline-block;
    margin: 2px 10px 0 20px;
    vertical-align: middle;
}

.page-total {
    display: inline-block;
    vertical-align: middle;
}
</style>

store.js 

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
　　renderData: {}, //數據
},
mutations: {
/*
* 及時保存後臺數據
*/
　　changeRenderData: (state, data) => {
　　　　state.renderData = data.data;
　　}
}
});

export default store;

調用：

table.vue

<template>
    <div class="body-box container">
      
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th class="text-center"></th>
                    <th class="text-center">操做</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(list,index) in count">
                    {{list.id}}
                    {{index}}
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6" >
                        <div class="col-sm-12 text-center">
　　　　　　　　　　　　　　　　　　//組件調用  傳參
                            <pagination  :url="url" :param="param" :current-page="currentPage" :total-pages="totalPages"></pagination>
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table> 
    </div>
</template>
<script>
    import pagination from '../components/pagination.vue'
    export default {
        data() {
            return {
                url: 'http://******/bike/bikeList', // 請求路徑
                param: {}, // 向服務器傳遞參數,
                currentPage: 'pageNum',//對應接口中的當前頁
                totalPages: 'totalPage',//對應接口中的總數字段
            }
        },
        created() {
                     
        },
        components: {
          pagination
        },
        methods: {
        },
        computed: {
　　　　　　　//經過store拿到data
          count() {
            return  this.$store.state.renderData;
            // console.log(this.tableList);
          }
        }

    }
</script>
<style  scoped lang='scss'></style>