记vue分页

公司业务发展使用vue做主要技术，做了一个vue的分页

引用了bootstrap的样式

代码如下：

首先定义一个分页模板:

template:`<ul class="pagination pull-right"> <li :class="{'disabled': current <= 1}"><a href="javascript:void(0);" @click="setCurrent($event, 1)"> 首页 </a></li> <li :class="{'disabled': current <= 1}"><a href="javascript:void(0);" @click="setCurrent($event, current - 1)"> 上一页 </a></li> <li v-for="p in pages" :class="{'active': current == p}"><a href="javascript:void(0);" @click="setCurrent($event, p)"> {{ p }} </a></li> <li :class="{'disabled': current >= pageCount}"><a href="javascript:void(0);" @click="setCurrent($event, current + 1)"> 下一页</a></li> <li :class="{'disabled': current >= pageCount}"><a href="javascript:void(0);" @click="setCurrent($event, pageCount)"> 尾页 </a></li> </ul>`

效果是这样的：

然后就是定义数据：

data: function() { return { current: 1, pageCount: 1, } }

接下来我们再这样来：

computed: { pages: function () { var limit = 6;//这里可以自己定义 var min = 1; var max = this.pageCount; var current = this.current; if (min < current - limit) { min = current - limit; } if (max > current + limit) { max = current + limit; } var list = []; for (var p = min; p <= max; p++) { list.push(p); } return list; } }

再来我们的方法：

setCurrent: function(e, page) { if (this.current != page && page >= 1 && page <= this.pageCount) {//这里是判断当前页是否是首页或尾页 e.page = page; this.$emit("pagechange", e) //触发父组件事件 } }, setPager: function (pager) { this.current = pager.pageNumber; this.pageCount = pager.pageCount; }

再来就是我们父组件调用：

<my-pagination ref="pagination" @pagechange="pagechange"></my-pagination>

父组件的方法：

pagechange:function(e){ //页码数 this.current = e.page; //this.loadData();加载后台返回的数据 }, loadData:function(){ //加载列表 var data = {} //请求参数 this.$ajax("//接口地址",data).$success(function (data) { //这里的$ajax和$success是自己做过封装的，小伙伴就调自己的好啦 //成功后的操作 this.$refs.pagination.setPager(data.pager)//映射组件里面的setPager }) }

好啦，vue分页就完成了，对vue涉及不是很深，在项目中运用到就记录下来，方便下次查用

写的不好的地方请各位大神指教

推荐一个之前参考的网址：http://www.cnblogs.com/yuqing6/p/7061647.html

 

转载于:https://www.cnblogs.com/lxmm/p/7808017.html