Vue中ElementUI分页组件Pagination的使用方法
时间：2022-06-24 08:59:16 | 栏目：vue | 点击：次
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.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 < 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（每页多少条）。