直接上代码
// 新建一个 myPagination.vue文件
<template>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="count">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
pageSize: 10,
pageNo:1,
}
},
props:{
count:{
type: Number || String,
default: 0
},
initData:{
type: Function
},
},
methods:{
handleSizeChange(val) {
this.pageSize = val;
this.pageNo = 1;
this.initData();
},
handleCurrentChange(val) {
this.pageNo = val;
this.initData();
},
setPageNo(pageNo=1){
this.pageNo = pageNo;
},
setPageSize(pageSize=10){
this.pageSize = pageSize;
},
getPageSize(){
return this.pageSize;
},
getPageNo(){
return this.pageNo;
}
},
}
</script>