Vue中ElementUI分页组件Pagination的使用 |
您所在的位置：网站首页 › vuesax分页 › Vue中ElementUI分页组件Pagination的使用 |
Vue中ElementUI分页组件Pagination的使用
|
Vue中ElementUI分页组件Pagination的使用
一、概要二、实现1、基本用法2、后端分页的实现3、前端分页的实现
一、概要
ElementUI 提供了 el-pagination 组件，只要配置相应得参数和事件，即可实现分页。
实现思路：向后台发送请求，传入pageNum、pageSize两参数，直接得到相应的分页数据。 // 获取数据 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” 和 尾页 的情况，只要满足条件即可 /** * 分页数据处理 * @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 { 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 { item.seq = index + start }) return list }总结：无论是前端分页和还是后端分页，最终都需要拿到两个参数：pageNum（当前页）、pageSize（每页多少条）。 |
【本文地址】
今日新闻 |
推荐新闻 |