Vue + element-ui 实现分页功能完整流程

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>

结果展示:

以上流程亲测有效，若有疑问麻烦提出，谢谢!

Vue + element-ui 实现分页功能完整流程相关推荐

Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

Vue + element-ui 实现分页功能完整流程

Vue + element-ui 实现分页功能完整流程相关推荐

最新文章

热门文章