element-ui是前端使用较频繁的组件网站，我也比较喜欢使用element-ui开发前端页面，下面使用该组件实现前端分页的功能.elementui官网
使用箭头所指的完整功能举个栗子
<div class="block"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange" //每页展示数据条数的调整@current-change="handleCurrentChange" //控制页面的跳转:current-page="currentPage4" //当前所在的页:page-sizes="[100, 200, 300, 400]" //这是每页有多少条数据展示:page-size="100" layout="total, sizes, prev, pager, next, jumper":total="400"> //数据的总条数，这是后端要展示的总数据条数</el-pagination>
<template><el-table:data="pageTicket" //这里要绑定分页后的当前页数据style="width: 100%"><el-table-columnprop="id"label="ID"></el-table-column><el-table-columnprop="status"label="Status"></el-table-column><el-table-columnprop="ticket_type"label="Type"></el-table-column><el-table-columnprop="submitted_time"label="Submitted Time"></el-table-column><el-table-columnprop="title"label="Title"></el-table-column></el-table><!--分页--><el-row><el-col style="text-align:right"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentpage":page-sizes="[5, 10, 50, 100]":page-size="pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-col></el-row></template><script>export default {data() {return {total:0, //总数据条数currentpage:1, //当前所在页默认是第一页pagesize:10, //每页显示多少行数据 默认设置为10ticket:[], //这里是从后端获取的所有数据pageTicket:[],//分页后的当前页数据}// 获取页面的表格所有数据getTicket(){let that = thisthat.$axios.get(that.baseURL+'PROD/ticket/documents/').then(function(res){if(res.data.code===1){that.ticket=res.data.data;//获取返回记录的总行数that.total=res.data.data.length; //获取当前页的数据that.getPageInfo(); //在这里调用获取当前页的数据信息方法that.$message({message: '数据加载成功!',type: 'success'});}else{// 失败的提示that.$message.error(res.data.msg);}}).catch(function(err){console.log(err);})},// 获取当前页的数据信息getPageInfo(){//清空pageTicket中的数据this.pageTicket=[];// 获取当前页的数据for(let i=(this.currentpage-1)*this.pagesize;i<this.total;i++){//把遍历的数据添加到pageTicket里面this.pageTicket.push(this.ticket[i]);//判断是否达到一页的要求if(this.pageTicket.length===this.pagesize) break;}},//分页时修改每页的行数,这里会自动传入一个sizehandleSizeChange(size){//修改当前每页的数据行数this.pagesize=size;//数据重新分页this.getPageInfo();},//调整当前的页码handleCurrentChange(pageNumber){//修改当前的页码this.currentpage=pageNumber;//数据重新分页this.getPageInfo()}}</script>
结果展示:
以上流程亲测有效，若有疑问麻烦提出，谢谢!
