第一步:根据每页要显示的条数来设置,关联分页代码的分页条件
在<el-table>中设置
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
第二步:在表格后面添加上分页代码
<el-pagination
class="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
第三步:定义变量
return{
tableData: [
{
proxyName: '王小虎',
}, {
proxyName: '王小',
}
],// 表格数据
// 分页
currentPage:1,
pagesize:10,
}
第四步:在methods中创建分页方法事件
// 分页
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
},