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>