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

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

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

1、基本用法

<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>

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两参数，直接得到相应的分页数据。

// 获取数据getData() { let param = {pageNum: this.tablePage.pageNum,pageSize: this.tablePage.pageSize } // 请求后台接口函数 getDataApi(param, { loading: true }).then(res => {// 后台返回数据this.list = res.data.listthis.tablePage.total = res.data.total }) },

3、前端分页的实现

实现思路：向后台发送请求，获取全部数据，前端通过pageNum、pageSize对数据进行处理，最终得到相应的分页数据。以下是处理数据得两种方法：

1、利用 Array.slice 截取想要的数组片段（ 此方法要考虑 总页数为“1” 和 尾页 的情况）2、利用 Array.filter 过滤出想要的数组片段（此方法无需考虑 总页数为“1” 和 尾页 的情况，只要满足条件即可

/** * 分页数据处理 * @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（每页多少条）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。