今天做vue翻页，查了好多都很麻烦，我相信一定会有简单的方法，果然，朋友们，往下看 首先进入vue项目里面安装一个模块
cnpm install vue-paginator-simple --save-dev
接下来在你的components文件夹里面创一个paginator.vue组件 在该组件里面复制粘贴上一下代码
<template lang="html"> <div class="pagination"> <ul> <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一页</li> <li :class="{active: curPage == 1}" @click="page(1)">1</li> <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li> <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li> <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li> <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li> <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1">下一页</li> </ul> </div> </template> <script> export default { props:['pageCount'], data(){ return { curPage: 1, }; }, computed:{ middlePages(){ if(this.pageCount <= 2){ return 0; }else if(this.pageCount> 2 && this.pageCount <= 10){ return this.pageCount-2; }else{ return this.curPage > 999 ? 5 : 8; } }, bigLimit(){ return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3; }, offset(){ if(this.curPage <= 5){ return 2; }else if(this.curPage >= this.bigLimit){ return this.bigLimit-2; }else{ return this.middlePages > 5 ? this.curPage-3 : this.curPage-2; } } }, methods:{ page(indexPage){ this.$emit('togglePage',indexPage); this.curPage = indexPage; }, prevPage(){ if(this.curPage != 1){ this.page(this.curPage-1); } }, nextPage(){ if(this.curPage != this.pageCount){ this.page(this.curPage+1); } } } }; </script> <style lang="css" scoped> @import 'styles/vars.css'; .pagination{ width: 660px; text-align: center; ul{ margin: 40px 0 60px 0; li{ cursor: pointer; display: inline-block; padding: 5px 9px; border: 1px solid #e1e1eb; margin-right: 5px; &.active{ background: #4078c0; color: #fff; } &.ellipsis{ border: none; } &.disabled{ color: #dcdcdc; } } } } </style>它封装好了翻页和样式，我们接下来在用到的vue组件里引用
<!-- 在你的 template 里面找个合适地方粘上这行代码，它是一个点击事件，点击某一页 --> <template> <paginator :pageCount="pageCount" :initPage="initPage" @togglePage="togglePage($event)"></paginator> </template>在你的 script 下面引入这个模块
import vuePaginator from 'vue-paginator-simple';接下来要给上面的点击事件里的两个变量初始值 在 script 里面 ，data下面使用模块
components:{ 'paginator': vuePaginator, },然后将翻页 样式导入进来
<style lang="css"> @import 'vue-paginator-simple/dist/vue-paginator-simple.css'; </style>接下来该定义点击事件了，咱们最上面是有一个点击某一页的点击事件，它是携带参数的，点击那一页它会带着哪一页的参数过来，这个很重要
methods:{ togglePage(indexPage){ //打印出当前页数 console.log(indexPage); var zipFormData = new FormData(); zipFormData.append('num', indexPage); this.axios.post('/api/get_data/',zipFormData).then(res=>{ // console.log(res.data.mes) var code = res.data.code if(code==200){ console.log(res.data.mes) this.spider_list = res.data.mes this.pageCount = res.data.total } }).catch(function(error){ console.log(error) }) },目前为止前台翻页样式和点击功能已经做好了，接下来看看后台怎么处理的 后台view里面导入模块
from django.core.paginator import Paginator后台获取到当前第几页就可以根据django分页模块处理数据了
class Get_data(APIView): def post(self,request): spideras = Spider_data.objects.all()[:10] # 取10条，这个自便 current_page = request.data['num'] # 获取当前第几页 page_count = 3 # 每页显示多少条 自己设定 page = Paginator(spideras,page_count) # 分页操作 spiderlist = page.get_page(current_page) # 根据当前页显示信息 total_page = page.num_pages # 计算一共有多少页 spider_list = spiderModelSerializer(spiderlist,many=True) # 将数据序列化 mes = {'code':200,'mes':spider_list.data,'total':total_page} # 返回数据和总页数 return Response(mes)终于写完了，简单的Demo，效果如下
