Vue组件实现分页

一.介绍
    本方法利用vue的父子组件实现分页功能，UI来自bootstrap。实现效果是最大页数小于五时全部显示，分页只显示五个页数，具体页码显示范围根据当前页与最大页数来变换。效果如下图所示：



               


二.子组件部分
    
Vue.component('page-divide',{
props:['index','maxpage','curpage'],
computed:{
pagelist:function(){ //控制页面显示页码范围的方法
if(this.maxpage<5){
return this.index;
}else{
if(this.curpage-2<=0){
return this.index;
}else if(this.curpage+2>this.maxpage){
return this.maxpage+this.index-5;
}else{
return this.curpage+this.index-3;
}
}
}
},
template:'<li v-bind:class="{active:curpage==pagelist}"><a v-on:click="switchpage">{{pagelist}}</a></li>',
methods:{
switchpage:function(){
this.$emit('switchpage',this.pagelist);
}
}
});    我们定义了一个标签名为page-divide的子组件由父组件传入三个属性，index:当前循环的下标,maxpage:最大页数,curpage:当前页面页码。子组件的属性pagelist,由根据computed计算得到，当前页等于pagelist时，模板的li标签样式变为active。点击模板中a标签，调用子组件switchpage方法，该方法触发父组件switchpage方法。
二.父组件部分
    首先创建父组件的vm实例，

     父组件使用Dom元素作为模板：<center>
<div id="page" onselectstart="return false">
<nav aligh="center" aria-lable="Page navigation">
<ul align="center" id="pager" class="pagination">
<li><a v-on:click="getData(currentpage-1)">上一页</a></li>
<page-divide @switchpage="getData"
v-for="n in pagesize"
:key="n.index"
:index="n"
:maxpage="maxpage"
:curpage="currentpage">
</page-divide>
<li><a @click="getData(currentpage+1)">下一页</a></l>
</ul>
</nav>
</div>
</center>    vue实例:var vmstand = new Vue({
el:'#stand',
data:{
currentpage:currentpage,
maxpage:0
},computed:{
pagesize:function(){
return this.maxpage>5?5:this.maxpage;
}
},
methods:{
getData:function(page){
this.currentpage=page;
var _self=this;
_self.flag=false;
$.ajax({type:"POST",url:"staticInfoController/getPage.do",
data : {'pageSize':1,'currentPage':page,'params':this.condition,'type':'basic.Standard'},async:false,
dataType:"text",success:function(data) {
data = eval("("+data+")");
if(page<=data.maxPage&&page>0){
_self.info =data.list;
_self.maxpage=data.maxPage;
_self.currentpage=page;
_self.flag=true;
}else if(page<=0){
_self.getData(1);
}else{
_self.getData(page-1);
}
_self.$nextTick(function(){
_self.initClickChecked();//业务需要方法，在dom加载结束后调用
})
}});
}}})     其中page-divide 就是定义的子组件。因为没有引用vue-resource,所以直接通过ajax得到数据，注意vue的this在ajax里面不能直接用，因为ajax里的this指的是调用本次ajax请求时传递的options参数。 el中使用v-for进行循环，循环次数为pagesize。在父组件中设置index,maxpage,curpage三个属性传入子组件。当子组件触发父组件switchpage方法时，父组件调用getData方法，重新获得数据。