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

前端之家收集整理的这篇文章主要介绍了基于vue2的table分页组件实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下

pagination.js:

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

pagination.css:

<div class="jb51code">
<pre class="brush: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:

规格值 操作 删除

index.js

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章