element ui表格 前端分页
2021-11-04 本文已影响0人
吃肉肉不吃肉肉
<el-table
:data="numData.slice((numPage.currentPage-1)*numPage.pageSize,numPage.currentPage*numPage.pageSize)"
border
stripe
>
<el-table-column prop="index" label="序号" width="50" align="center" />
<el-table-column prop="nickname" label="代理公司团队" align="center" />
<el-table-column prop="A" label="A礼包" width="180" align="center" />
<el-table-column prop="B" label="B礼包" align="center" />
<el-table-column prop="num" label="总计" align="center" />
</el-table>
<div style="margin-top: 20px">
<el-pagination
:current-page="numPage.currentPage"
:page-sizes="[10, 15, 20, 25]"
:page-size="numPage.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="parseInt(numPage.total)"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
data() {
return {
loadingFull: false,
numData: [],
numPage: {
currentPage: 1,
pageSize: 15,
total: 0
},
activity_id: '',
activitys: [],
}
},
handleSizeChange(newSize) {
// pagesize改变触发
this.numPage.pageSize = newSize
},
handleCurrentChange(newPage) {
// 页码改变触发
this.numPage.currentPage = newPage
},