ElementUI 本地分页
Posted 墨韵
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI 本地分页相关的知识,希望对你有一定的参考价值。
因为一些业务需求,需要用到前端本地分页,直接上代码
<el-table
:data="orderList.slice((pageNo-1)*pageSize,pageNo*pageSize)"
empty-text="暂无数据"
v-loading="orderLoading">
</el-table>
<div style="text-align: center;margin-top: 20px;">
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:current-page.sync="pageNo"
:page-sizes="[20,40,60,80,100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum">
</el-pagination>
</div>
export default {
data(){
return {
orderList: [],
pageSize: 20,
pageNo: 1,
totalNum: 0,
}
},
methods:{
getData(){
//省略...
},
sizeChange(val) {
this.pageSize = val;
this.pageNo = 1;
},
currentChange(val) {
this.pageNo = val
},
},
mounted(){
this.getData();
}
}
以上是关于ElementUI 本地分页的主要内容,如果未能解决你的问题,请参考以下文章
五:Vue之ElementUI 表格Table与分页Pagination组件化