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>