<el-pagination class="pagination"
@current-change="handleCurrentChange"
background
layout="prev, pager, next , jumper"
:current-page.sync="tableList.pageIndex"
:total="totalCount">
</el-pagination>
问题是：这样写没有【总页数】【每页多少条】的
分页器.png
解决：
<el-pagination background
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
:current-page.sync="tableList.pageIndex"
:page-sizes="[5, 10, 15, 20]" //每页展示条选择组件
:page-size="pagesize" //每页展示条
@current-change="handleCurrentChange" // currentPage 改变触发
@size-change="handleSizeChange" //pagesize改变时触发
>
</el-pagination>
return{
tableList: {
pageIndex: 1,
},
tableDatas: [],
totalCount: 1,
pagesize: 10,
currpage: 1
}
methods: {
getlist() {
let starttime = new Date();
axios('/mockDrink').then(data => {
console.log(new Date() - starttime)
this.tableDatas= data.data.data;
this.totalCount= data.data.totalCount;
}).catch(err => {
console.error(err)
this.$alert('请求超时，刷新重试！')
})
},
handleCurrentChange(cpage) {
this.currpage = cpage;
},
handleSizeChange(psize) {
this.pagesize = psize;
}
}
效果如下：
image.png
