Vue中ElementUI分页组件Pagination的使用方法
更新时间:2021年05月31日 10:08:44 作者:G.E.M.千百度
这篇文章主要为大家详细介绍了Vue中ElementUI分页组件Pagination的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下
一、概要
ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页。
![](https://i-blog.csdnimg.cn/blog_migrate/58c4da62824c7e9b55e25e6c0b2c80e7.jpeg)
二、实现
1、基本用法
1 2 3 4 5 6 7 8 9 10 11 12 | < div class = "pagination" > < el-pagination background layout = "total, sizes, prev, pager, next, jumper" :current-page = "tablePage.pageNum" :page-size = "tablePage.pageSize" :page-sizes = "pageSizes" :total = "tablePage.total" @ size-change = "handleSizeChange" @ current-change = "handlePageChange" /> </ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | data() { return { tablePage: { pageNum: 1, // 第几页 pageSize: 10, // 每页多少条 total: 0 // 总记录数 }, pageSizes: [10, 20, 30] } }, methods: { handlePageChange(currentPage) { this .tablePage.pageNum = currentPage // 在此刷新数据 }, handleSizeChange(pageSize) { this .tablePage.pageSize = pageSize // 在此刷新数据 } } |
2、后端分页的实现
正在上传…重新上传取消
实现思路:向后台发送请求,传入pageNum、pageSize两参数,直接得到相应的分页数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 获取数据 getData() { let param = { pageNum: this .tablePage.pageNum, pageSize: this .tablePage.pageSize } // 请求后台接口函数 getDataApi(param, { loading: true }).then(res => { // 后台返回数据 this .list = res.data.list this .tablePage.total = res.data.total }) }, |
3、前端分页的实现
实现思路:向后台发送请求,获取全部数据,前端通过pageNum、pageSize对数据进行处理,最终得到相应的分页数据。以下是处理数据得两种方法:
1、利用 Array.slice 截取想要的数组片段( 此方法要考虑 总页数为“1” 和 尾页 的情况)
2、利用 Array.filter 过滤出想要的数组片段(此方法无需考虑 总页数为“1” 和 尾页 的情况,只要满足条件即可
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 34 35 36 37 | /** * 分页数据处理 * @param data [Array] 需要分页的数据 * @param num [Number] 当前第几页 * @param size [Number] 每页显示多少条 */ getList(data, num, size) { let list, total, start, end, isFirst, isLast total = data.length isFirst = total < size isLast = Math.ceil(total / size) === num start = (num - 1) * size end = isFirst || isLast ? start + (total % size) : start + size list = data.slice(start, end) list.forEach((item, index) => { item.seq = index + start }) return list } /** * 分页数据处理 * @param data [Array] 需要分页的数据 * @param num [Number] 当前第几页 * @param size [Number] 每页显示多少条 */ getList(data, num, size) { let list, start, end start = (num - 1) * size end = start + size list = data.filter((item, index) => { return index >= start && index < end }) list.forEach((item, index) => { item.seq = index + start }) return list } |
总结:无论是前端分页和还是后端分页,最终都需要拿到两个参数:pageNum(当前页)、pageSize(每页多少条)。