Vue中ElementUI分页组件Pagination的使用方法

Vue中ElementUI分页组件Pagination的使用方法

 更新时间：2021年05月31日 10:08:44   作者：G.E.M.千百度  

这篇文章主要为大家详细介绍了Vue中ElementUI分页组件Pagination的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Vue中ElementUI分页组件Pagination的使用，供大家参考，具体内容如下

一、概要

ElementUI 提供了 el-pagination 组件，只要配置相应得参数和事件，即可实现分页。

二、实现

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（每页多少条）。