component 文件下的pagination.vue
<!-- 分页组件封装 -->
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name:"Pagination",
props:{
total:{
required:true,
type:Number
},
page:{
type:Number,
default:1
},
limit:{
type:Number,
default:20
},
pageSizes:{
type:Array,
default(){
return [10,0,30,50]
}
},
layout:{
type:String,
default:'total,sizes,prev,pager,next,jumper'
},
background:{
type:Boolean,
default:true
},
autoScroll:{
type:Boolean,
default:false
},
},
computed:{
currentPage:{
get(){
return this.page
},
set(val){
this.$emit("update:page",val)
}
},
pageSize:{
get(){
return this.limit
},
set(val){
this.$emit("update:limit",val)
}
}
},
methods:{
handleSizeChange(val){
this.$emit("pagination",{page:this.currentPage,limit:val})
if(this.autoScroll){
scrollTo(0,800)
}
},
handleCurrentChange(val){
this.$emit("pagination",{page:val,limit:this.pageSize})
if(this.autoScroll){
scrollTo(0,800)
}
}
}
}
</script>
<style scoped>
.pagination-container{
background:#fff;
padding:32px 16px;
}
.pagination-container .hidden{
display:none
}
</style>
使用pagination组件的页面
<!-- 使用pagination组件 -->
<template>
<div>
<Pagination
v-show="pageInfo.total>0"
:total="pageInfo.total"
:pager-count="pageInfo.pageCount"
:page.sync="pageInfo.current"
:limit.sync="pageInfo.size"
:@pagination="findList()"
/>
</div>
</template>
<script>
import Pagination from '@/components/pagination.vue'
export default{
components:{
Pagination
}
}
</script>