1.el-table:
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
···
</el-table>
2.el-pagination:
<div style="text-align: right;">
<el-pagination
background
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total,prev,pager,next,sizes,jumper"
:total="tableData.length">
</el-pagination>
</div>
3.data:
data() {
return {
currentPage: 1, //当前页码
pageSize: 5, //每页显示的行数
tableData: [], //表格数据
}
}
4.methods:
// 页面切换
handleCurrentChange(val){
this.currentPage = val;
},
// 调整每页显示的条数
handleSizeChange(val) {
this.pageSize = val;
},
5.表格序号问题：（表格中序号每页都是一样的，所以要使用自己写的序号方法）
<el-table-column label="序号" width="50px" align="center">
<template slot-scope="scope">
{{scope.$index + (currentPage - 1) * pageSize + 1}}
</template>
</el-table-column>
标签：10,分页,pageSize,表格,val,序号,currentPage,每页 From： https://www.cnblogs.com/chenJieLing/p/17532191.html