Vue整合Element-UI的分页组件实现分页

前段时间在做一个系统后台，需要用表格加载显示后台数据项并分页显示。
　　分页可以通过不同的方式实现：
　　1、客户端分页
　　一次请求把数据全部从后端请求回来，在前端处理，显示所需要的页面的数据项。这样做的好处是无需多次与服务端进行交互，切换页面时不需要刷新所以没有延迟。但仅限于数据量较小的时候使用，如果数据量很大页面渲染将变得很慢。
　　2、服务端分页
　　当数据量比较大时，一次请求传输所有数据考虑到效率问题就不是很合适，原本分页的主要目的就是避免一次性从数据库获取大量数据，其次才是为了展示效果。这时候前端根据需要将查询条件（当前页数和每页条数）传给后端，后端根据条件查询出数据返回给前端。这样做的好处减轻了每次交互的负担，但缺点是每次切换页时都需要访问数据库，会有轻微的延迟。
　　因为我这个系统数据量不大，所以我选择在客户端进行分页。我这里为了方便用了Element-UI的分页器组件。
　　它有很多属性可以选择，我这里有很多不需要就没用到，所以先上一个官方文档可以根据需要选择：http://element-cn.eleme.io/#/zh-CN/component/pagination

不多说废话直接贴代码：

<div class="table-div"><el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 96%;margin-left: 2%" height="90%"><el-table-column prop="number" label="学号"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column label="操作" align="center" header-align="left"><template slot-scope="scope"><button class="button-edit" @click="handleEdit(scope.index,scope.row)"><i class="el-icon-edit"></i></button><button class="button-reset" @click="resetPassword(scope.index,scope.row)"><i class="el-icon-refresh"></i></button><button class="button-delete" @click="handleDelete(scope.index,scope.row)"><i class="el-icon-delete"></i></button></template></el-table-column></el-table><el-pagination layout="prev, pager, next, sizes, total, jumper":page-sizes="[5, 10,100]" :page-size="pageSize":total="tableData.length" @current-change="handleCurrentChange" @size-change="handleSizeChange" style="text-align: center;margin-top: 1%;"></el-pagination>
</div><script>export default {name: "studentAdmin",data(){return{tableData: [{id:'',number:'',name:'',email:''}],pageSize: 10,currentPage: 1}},methods:{handleCurrentChange:function(cpage){this.$data.currentPage = cpage;},handleSizeChange:function(psize){this.$data.pageSize = psize;}}}
</script>

JQuery也有类似的分页插pagination可供选择。有能力的话最好还是使用原生的JS或者JQuery来开发分页功能，毕竟使用插件不一定所有功能都能符合要求，仅仅是寻求一个方便。

Vue整合Element-UI的分页组件实现分页相关推荐

vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...

Vue整合Element-UI的分页组件实现分页

Vue整合Element-UI的分页组件实现分页相关推荐

最新文章

热门文章