elementUI分页组件封装

在实际开发需求，产品需要的分页组件比较简单，只可以一页页地翻，就是为了防止用于直接翻看最后的数据（因为有一些历史数据数据量比较大，查看的意义不大，检索效率比较低也比较忙，因为不希望用户在翻页的时候可以随意翻看很久之前的数据）

因此需要根据实际需求进行分页组件封装

以下封装的分页组件，勉强够用，但是还不够完善，有需要的用于可以再次基础上继续完善

<template>
  <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" :layout="layout">
    <slot>
      <ul class="el-pager">
        <li class="number active">{{currentPage}}</li>
        <li class="number" @click="handlePage(item)" v-for="item in pager">{{item}}</li>
      </ul>
    </slot>
  </el-pagination>
</template>
<script>
export default {
  props: {
    currentPage: {
      type: [String, Number],
      default: 1
    },
    total: {
      type: [String, Number],
      default: 0
    },
    pageSizes: {
      type: Array,
      default:function(){
        return  [10,20,50,100,200,300,400]
      }
    },
    pageSize: {
      type: [String, Number],
      default: 10
    },
    layout: {
      type: String,
      default: 'total,prev,slot,next,sizes'
    }
  },
  data() {
    return {
    }
  },
  computed:{
    pager:function(){
      let pager=this.total/this.pageSize
      pager=Math.ceil(pager)//总页数
      if(pager<this.currentPage){
        return []
      }
      let flag=this.currentPage+4
      if(flag>pager){//大于总页数
        let arr=[]
        let total=pager-this.currentPage
        for(let i=1;i<=total;i++){
          arr.push(this.currentPage+i)
        }
        return arr
      }else if(flag<=pager){
        return [this.currentPage+1,this.currentPage+2,this.currentPage+3,this.currentPage+4]
      }
    }
  },
  methods: {
    handlePage(page){
      this.handleCurrentChange(page)
    },
    handleSizeChange(val) {
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val)
    }
  }
}

</script>
<style lang="scss" scoped>
.page {
  text-align: center;
  color: #409EFF;
}

</style>

 页面使用：

　　1、在main.js页面全局注册分页组件

// 全局注册分页组件
import newPagination from '@/components/newPagination'
Vue.component('newPagination', newPagination)

　　2、页面直接调用

 <new-pagination @current-change="handleCurrentChangeExp" :page-size=listQryExp.limit layout="total, prev, pager, next" :total=totalExp></new-pagination>