基于vue2的table分页组件

pagination.js:

(function(){

    var template = '<div class="page-bar"  > \

                      <div class="info">{{info}}</div>\

                      <div class="showpages">每页<select class="showpages-select" v-on:change="pageschange" v-model="selected" ><option v-for="item in showpages">{{item}}</option></select>条</div>\

                     <div class="pagesbtn"><ul v-on:click="setpage"> \

                       <li ><a v-bind:class="setButtonClass(0)"  v-on:click="firstPage()">首页</a></li> \

                       <li><a v-bind:class="setButtonClass(0)" v-on:click="prvePage()">上一页</a></li> \

                       <li  v-for="index in indexs"  v-bind:class="{ active: cur == index }"> \

                          <a v-on:click="btnclick(index)" >{{ index < 1 ? "..." : index }}</a> \

                       </li> \

                       <li  ><a v-bind:class="setButtonClass(1)"  v-on:click="nextPage()">下一页</a></li> \

                       <li ><a v-bind:class="setButtonClass(1)"  v-on:click="lastPage()">尾页</a></li> \

                     </ul></div> \

                   </div>\

                   '

    var pagination = Vue.extend({

        template: template,

        props: ["cur", "all", "selected", "showpages", "info"],

        computed: {

            indexs: function () {

                var left = 1

                var right = this.all

                var ar = []

                if (this.all >= 11) {

                    if (this.cur > 5 && this.cur < this.all - 4) {

                        left = this.cur - 5

                        right = this.cur + 4

                    } else {

                        if (this.cur <= 5) {

                            left = 1

                            right = 10

                        } else {

                            right = this.all

                            left = this.all - 9

                        }

                    }

                }

4000
                while (left <= right) {

                    ar.push(left)

                    left++

                }

                if (ar[0] > 1) {

                    ar[0] = 1;

                    ar[1] = -1;

                }

                if (ar[ar.length - 1] < this.all) {

                    ar[ar.length - 1] = this.all;

                    ar[ar.length - 2] = 0;

                }

                return ar

            }

        },

        methods: {

            btnclick: function (page) {

                this.cur = page;

            },

            nextPage: function () {

                if (this.cur >= this.all) {

                   this.cur=this.all;

                }else{

                    this.cur++;

                }

            },

            prvePage: function () {

                if (this.cur <= 1) {

                     this.cur=1;

                }else{

                    this.cur--;

                }

            },

            firstPage: function () {

               this.cur=1;

            },

            lastPage: function () {

                this.cur=this.all;

            },

            setButtonClass: function (isNextButton) {

                if (isNextButton) {

                    return this.cur >= this.all ? "page-button-disabled" : ""

                }

                else {

                    return this.cur <= 1 ? "page-button-disabled" : ""

                }

            },

            setpage:function () {

                this.$emit('mypage', this.cur);

            },

            pageschange:function () {

                this.$emit('pageschange', this.selected);

            }

        }

    })

    window.Pagination = pagination

})()

==========================

pagination.css:

ul, li {
margin: 0;
padding: 0;

}

.page-bar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: right;
border-radius: 4px;

}

.page-bar .info{
float: left;
margin-left:16px;
font-size: 16px;
height: 100%;

}

.page-bar .showpages{
float: left;
font-size: 16px;
margin-left: 16px;
height: 100%;

}

.page-bar .showpages .showpages-select{
width: 70px;
margin: 0 10px;
height: 28px

}

.page-bar .pagesbtn{
float: left;
margin-left:16px;
width: 650px;
height: 100%;

}

.page-bar .pagesbtn ul{
text-align: center;
width: 100%;

}

.page-button-disabled {
color:#ddd !important;

}

.page-bar li {
list-style: none;
display: inline-block;

}

.page-bar li:first-child > a {
margin-left: 0;

}

.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;

}

.page-bar a:hover {
background-color: #eee;

}

.page-bar .active a {
color: #fff;
cursor: default;
background-color: #1e7aca;
border-color: #1e7aca;

}

.page-bar i {
font-style: normal;
color: #1e7aca;
margin: 0 4px;
font-size: 12px;

}

===================

index.html:

   <table class="table table-bordered  table-hover  "

                                           id="ggztable" v-show="isAddSpecifications">

                                        <thead>

                                        <tr>

                                            <th>规格值</th>

                                            <th>操作</th>

                                        </tr>

                                        </thead>

                                        <tbody>

                                        <tr v-for="(item,nn) in limitTemps">

                                            <td>{{item.value}}</td>

                                            <td>

                                                <img src='../img/common_edit@25.png' data-toggle="modal"

                                                     data-target="#editSonModal" @click="editSonModal(item,nn)"

                                                     alt='修改'>

                                                <img src='../img/common_del@25.png' data-toggle="modal"

                                                     data-target="#delSonModal" @click="delSonModal(nn)" alt='删除'>

                                            </td>

                                        </tr>

                                        </tbody>

                                    </table>

                                    <vue-pagination :cur="specificationValCur" :all="specificationValAll" :info="specificationValInfo" :showpages="specificationValShowpages" :selected="specificationValselected"

                                                    v-on:mypage="getPage" v-on:pageschange="getspecificationValShowPages"></vue-pagination>

=======================

index.js

/**

 * Created by komi on 2017-03-05 0005.

 */

var vm = new Vue({

    el: ".main",

    data: {

        specificationValCur: 1,//当前页

        specificationValAll: 1,//总页数

        specificationValselected: 10,//默认每页显示的页数

        specificationValTotalRecond: 1,//总记录数

        specificationValShowpages: [10, 30, 50, 100], //每页显示的页数

        specificationValInfo: "",

        limitTemps: [],

        temps:[]//数据源

    },

    watch: {

        temps: "setPage"

    },

    components: {

        'vue-pagination': Pagination

    },

    methods: {

        setPage: function () {

            this.specificationValInfo = "记录数为:" + this.temps.length + "条";

            this.specificationValTotalRecond = this.temps.length;

            this.setPageBtn();

            this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,1)

        },

        getPage:function (msg) {

            this.specificationValCur=msg;//这里必须,否则按钮无法高亮

            this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,msg)

        },

        setPageLimit: function (total,select,cur) {//这里为实现分页切换table的主要实现

            if(total<=select){

                this.limitTemps=this.temps;

                return

            }else {

                var arr = [];

                var a=select*(cur-1);

                var b=select*cur;

                for (var i = a; i < b; i++) {

                    if(typeof(this.temps[i])!="undefined"){

                        arr[i - a] = this.temps[i]

                    }

                }

                this.limitTemps = arr;

            }

            console.log("total:"+total+"select"+select+"cur"+cur)

        },

        setPageBtn: function () {

            if (this.specificationValTotalRecond > this.specificationValselected) {

                if (this.specificationValTotalRecond % this.specificationValselected == 0) {

                    this.specificationValAll = this.specificationValTotalRecond / this.specificationValselected

                } else {

                    this.specificationValAll = parseInt(this.specificationValTotalRecond / this.specificationValselected) + 1

                }

            } else {

                this.specificationValAll = 1

            }

        },

        getspecificationValShowPages: function (pages) {

            this.specificationValselected = pages;

            this.setPageBtn();

            this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,1)

        }

    }

});