element-ui分页组件,vue分页插件pagination
本文主要介绍Vue中ElementUI的分页组件Pagination的使用。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
Vue中ElementUI的分页组件Pagination的使用方法，供大家参考。具体情况如下
一、概要
ElementUI提供了el-pagination组件，可以通过配置相应的参数和事件来实现分页。
二、实现
1、基本用法
div class=分页
el分页
背景
layout=总计，大小，上一页，分页，下一页，跳转
:current-page= table page . pagenum
:page-size=tablePage.pageSize
:page-size= pageSizes
:total=tablePage.total
@size-change=handleSizeChange
@ current-change= handlePageChange
/
/div
data() {
返回{
表格页面：{
Enum: 1，//哪个页面
PageSize: 10，//每页多少
总计：0 //记录总数
},
页面大小：[10，20，30]
}
},
方法：{
handlePageChange(currentPage) {
this . table page . pagenum=current page
//刷新此处的数据
},
handleSizeChange(pageSize) {
this . table page . pageSize=pageSize
//刷新此处的数据
}
}
2、后端分页的实现
实现思路：向后台发送请求，传入两个参数pageNum和pageSize，直接得到对应的分页数据。
//获取数据
getData() {
让param={
pageNum: this.tablePage.pageNum，
页面大小：this.tablePage.pageSize
}
//请求后台接口函数
getDataApi(param，{ loading: true })。然后(res={
//在后台返回数据
this.list=res.data.list
this . table page . total=RES . data . total
})
},
3、前端分页的实现
实现思路：向后台发送请求，获取所有数据。前端通过pageNum和pageSize对数据进行处理，最终得到相应的分页数据。以下是处理数据的两种方法：
1.使用Array.slice截取所需的数组片段(该方法要考虑总页数为“1”且为最后一页的情况)。
2.使用Array.filter过滤掉想要的数组碎片(这种方法不需要考虑总页数为“1”和最后一页的情况，只要满足条件即可。
/**
*分页数据处理
* @param data [Array]要分页的数据
* @param num [Number]当前页面是什么页面？
* @param size [Number]每页显示多少？
*/
获取列表(数据，数量，大小){
let list，total，start，end，isFirst，isLast
总计=数据长度
isFirst=总大小
is last=math . ceil(total/size)==num
开始=(数字- 1) *大小
end=isFirst isLast？开始(总大小百分比) :开始大小
list=data.slice(开始，结束)
list.forEach((item，index)={
item.seq=索引开始
})
返回列表
}
/**
*分页数据处理
* @param data [Array]要分页的数据
* @param num [Number]当前页面是什么页面？
* @param size [Number]每页显示多少？
*/
获取列表(数据，数量，大小){
让列表，开始，结束
开始=(数字- 1) *大小
结束=开始大小
list=data.filter((item，index)={
返回索引=开始索引结束
})
list.forEach((item，index)={
item.seq=索引开始
})
返回列表
}
总结：无论是前端分页还是后端分页，最终都需要得到两个参数：pageNum(当前页面)和pageSize(每页多少页)。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。