模板部分:
<template>
<div>
<el-table :data='dataShow'>
....
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
js部分:
export default {
name:'index',
data() {
return {
list:[], //后台页面数据,主要用来更新页面条数时传值
total:0, //数据总数
pageSize:10, //默认每页10条数据
pageNum:1, //总页数,默认为1页
totalPageData: [], //分页后的数据列表
currentPage: 1, //当前页,默认为1
dataShow:[], //最后根据totalPageData的下标展示当前页的数据
}
}
mounted(){
this.getList();
}
methods: {
isEmpty,
getList() {
//后端请求的数据
testList().then(response => {
this.list = response.data
this.total= response.data.length
this.calcPageData(this.list,this.total)
})
},
calcPageData(list,total) {
// 计算总页数(根据后台数据的总数计算有几页,得0时设为1,因为不可能有第0页)
if (total> this.pageSize) { //总数大于每页的数量才有必要计算
this.pageNum = Math.ceil(total / this.pageSize) || 1;
}
// 数据分组
for (let i = 0; i < this.pageNum; i++) {
// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5, 则第一页是1-5条,即slice(0,5),第二页是6-10条,即slice(5,10)...
this.totalPageData[i] = list.slice(this.pageSize * i, this.pageSize * (i + 1));
}
// 获取到数据后显示第一页内容,数组下标是从0开始的,这里一定要减去1,不然会丢失一组数据
this.dataShow = this.totalPageData[this.currentPage - 1];
},
// 当前页码currentPage发生变化
handleCurrentChange(newPageNum) {
this.currentPage = newPageNum;
// 这里仍然不要忘记减去1
this.dataShow = this.totalPageData[newPageNum - 1];
},
// 每页条数pageSize发生变化
handleSizeChange(newPageSize) {
this.pageSize = newPageSize;
// 重新计算页数并分组
this.calcPageData(this.list,this.total);
},
}
}