vue+Element-ui实现分页效果实例代码详解
时间:2018-12-10
这篇文章主要介绍了vue+Element-ui实现分页效果 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。
1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能
最终效果展示
<div class="deit"> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表</el-breadcrumb-item> </el-breadcrumb> <div class="cantainer"> <el-table style="width: 100%;" :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //对数据请求的处理,最为重要的一句话 > <el-table-column type="index" width="50"> </el-table-column> <el-table-column label="日期" prop="date" width="180"> </el-table-column> <el-table-column label="用户姓名" prop="name" width="180"> </el-table-column> <el-table-column label="邮箱" prop="email" width="180"> </el-table-column> <el-table-column label="地址" prop="address" width="200"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的,每选择一行,要展示多少内容 :page-size="pagesize" //显示当前行的条数 layout="total, sizes, prev, pager, next, jumper" :total="userList.length"> //这是显示总共有多少数据, </el-pagination> </div> </div> </div>
需要data定义一些,userList定义一个空数组,请求的数据都是存放这里面
data () { return { currentPage:1, //初始页 pagesize:10, // 每页的数据 userList: [] } },
对一些数据,方法处理,数据的来源是自己通过json-server搭建的本地数据,通过vue-resource请求数据,
created() { this.handleUserList() }, methods: { // 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize) //每页下拉显示数据 }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; console.log(this.currentPage) //点击第几页 }, handleUserList() { this.$http.get('http://localhost:3000/userList').then(res => { //这是从本地请求的数据接口, this.userList = res.body }) } }
以上都是分页所需的功能,也是自己在自己写案例中所遇到的,并总结下方便查看,喜欢的可以关注一下
可以关注一下https://github.com/MrZHLF/vue-admin-system,这个案例还在完善当中,功能还在增加
总结
以上所述是小编给大家介绍的vue+Element-ui实现分页效果实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- WordPress 后台编辑文章页面添加自定义提示文字
- 使用json 和jQuery制作级联dropdownlist
- 在64位Windows 7/2008操作系统上部署32位的Web应用程序错误
- 云计算浪潮
- 2.[Andriod]Andriod Studio结合Visual Studio Emulator for Android调试Android App
- Windows Server AppFabric Caching
- zepto 基础知识(2)
- DeepMind回顾2017年:除了战胜柯洁还有哪些大事
- [认证授权] 1.OAuth2授权
- 机器学习(四)——梯度下降算法解释以及求解
- 在Windows上运行单节点的Cassandra
- Mono技术规格
- 如何站在使用者的角度来设计SDK-微信公众号开发SDK(消息处理)设计之抛砖引玉
- 机器学习(三)——k-近邻算法基础
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何在Linux中自定义bash命令提示符
- 详解如何在Linux上一次性批量重命名一组文件
- 虚拟机中centos修改时间的方法
- Ubuntu 18.04 Server 设置静态IP 的方法
- 嵌入式Linux重启QT应用程序的简单办法(基于QT4.8 qws)
- CentOS下MySQL的彻底卸载的几种方法
- centos7中安装Android SDK的方法步骤
- centos配置ssh免密码登录后仍要输入密码的解决方法
- CentOS7.2安装Nginx的方法步骤
- CentOS安装Python2.7与Python2.6并存的方法
- 详解Centos下YUM安装PHP的两种方式
- linux下make命令实现输出高亮的方法
- Ubuntu彻底卸载MySQL、Apache2和Php的方法教程
- linux下如何创建守护进程的步骤
- ubuntu系统中/etc/rc.local和/etc/init.d/rc.local的区别详解