二次封装分页组件

二次封装分页组件

<template>
  <el-pagination
   class="app-pagination"
   :background="background"
   :current-page="normalizedPageNum"
   :page-size="normalizedPageSize"
   :page-sizes="$attrs['page-sizes']||[10,20,30,40,50]"
   :layout="$attrs.layout||'total,prev,pager,next,sizes'"
   v-bind="$attrs"
   @size-change="onSizeChange"
   @current-change="onCurrentChange"
   v-on="$listeners"
  />
</template>
<script>
const EVENT_CHANGE='change'
const EVENT_UPDATE_CURRENT_PAGE='updata:pageNum'
const EVENT_UPDATE_PAGE_SIZE='updata:pageSize'

export default {
  name:'AppPagination',
  props:{
    background:{
      type:Boolean,
      default:false
    },
    pageNum:{
      type:Number,
      default:1
    },
    pageSize:{
      type:Number,
      default:20
    },
    updateRouteOnChange:{
      type:Boolean,
      default:true
    }
  },
 
  computed:{
    normalizedPageNum(){
      let {pageNum}=this
      if(this.updateRouteOnChange&&this.$route.query.pageNum){
        pageNum=Number(this.$route.query.pageNum)||pageNum
      }
      return pageNum
    },
    normalizedPageSize(){
      let {pageSize}=this
      if(this.updateRouteOnChange&&this.$route.query.pageSize){
        pageSize=Number(this.$route.query.pageSize)||pageSize
      }
      return pageSize
    }
  },
  methods: { 
    onCurrentChange(value){
      this.$emit(EVENT_UPDATE_CURRENT_PAGE,value)
      this.$emit(EVENT_CHANGE,{
        pageNum:value,
        pageSize:this.normalizedPageSize
      })
    },
    onSizeChange(value){
    this.$emit(EVENT_UPDATE_CURRENT_PAGE,1)
    this.$emit(EVENT_UPDATE_PAGE_SIZE,value)
    this.$emit(EVENT_CHANGE,{
      pageNum:1,
      pageSize:value
     })
    }
  }
}
</script>
<style lang="less" scoped>
  .app-pagination{
    display:flex;
    justify-content:flex-end;
  }
</style>