=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){
returnthis.cur>=this.all?"page-button-disabled":""
}
else{
returnthis.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:010px;
height:28px
}
.page-bar.pagesbtn{
float:left;
margin-left:16px;
width:650px;
height:100%;
}
.page-bar.pagesbtnul{
text-align:center;
width:100%;
}
.page-button-disabled{
color:#ddd!important;
}
.page-barli{
list-style:none;
display:inline-block;
}
.page-barli:first-child>a{
margin-left:0;
}
.page-bara{
border:1pxsolid#ddd;
text-decoration:none;
position:relative;
float:left;
padding:6px12px;
line-height:1.42857143;
color:#337ab7;
cursor:pointer;
}
.page-bara:hover{
background-color:#eee;
}
.page-bar.activea{
color:#fff;
cursor:default;
background-color:#1e7aca;
border-color:#1e7aca;
}
.page-bari{
font-style:normal;
color:#1e7aca;
margin:04px;
font-size:12px;
}
index.html:
| 规格值 |
操作 |
{{item.value}} |
|
index.js
/**
*Createdbykomion2017-03-050005.
*/
varvm=newVue({
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{
vararr=[];
vara=select*(cur-1);
varb=select*cur;
for(vari=a;ithis.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)
}
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。