(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      }     }    }    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})()

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;}

<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>

/** * 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)  } }});