vue+Element-ui简洁代码实现分页效果-验证测试通过
看了很多教程,这个是最简单且经过我验证OK的。
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+Element-ui实现分页效果的具体代码,供大家参考,具体内容如下
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。
1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能
最终效果展示
![](https://img-blog.csdnimg.cn/img_convert/45f46b39e2561225abac05263c9a020d.jpeg)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | < 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 > |
2.需要data定义一些,userList定义一个空数组,请求的数据都是存放这里面
1 2 3 4 5 6 7 | data () { return { currentPage:1, //初始页 pagesize:10, // 每页的数据 userList: [] } }, |
3.对一些数据,方法处理,数据的来源是自己通过json-server搭建的本地数据,通过vue-resource请求数据,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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 }) } } |