基于vue2的table分页组件实现方法

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,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=selectcur;
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,1)
}
}
});