pagination封装

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>