vue封装pagination分页

src/components/Pagination

 

<template>
   <div :class = "{'hidden':hidden}" class ='pagination'>
        <el-pagination
             small
            :background:'background'
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :page-count.sync="Count"
            :layout="layout"
             :total="total"
            v-bind="$attrs"
            @size-change="handleSizeChnage"
            @current-change="handleCurrentChange"
         >

         </el-pagination>
   </div>
</template>

import {scrollTo} from '@/utils/scroll-to'
export default {
    name:'pagination',
    props:{
        total:{
            required:'true',
            type:Number
        },
        page:{
           type:Number,
           default:1
        },
         limit:{
            type:Number,
            default:2
         },
         Count:{
            type:Number,
            default:5
         },
          layout:{
             type:String,
             default:'total,prev,pager,next'
         },
         background:{
             type:Boolean,
             default:true
         },
         autoScroll:{
             type:Boolean,
             default:true
         },
         hidden:{
             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})
          }
    }
}

 引用

<Pagination
     v-show="totalNum>0"
     :total="totalNum"
     :page.sync="listQuery.page"
     :limt.sync="listQuery.limit"
     @pagination="getList"
>

</Pagination>
import Pagination from '@/components/Pagination'
export default{
     name:'cc',
     conponents:{Pagination}.
     data(){
        return {
           totalNum:0,
           listQuery:{
              page:1,
              limit:10
           }
         }
     },
      methods:{
           getList(){
               getList(this.listQuery).then((res)=>{console.log()})
            }
      }

}