Element Pagination分頁組件 二次封裝

新建 Pagination

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :pager-count="count"
      :layout="layout"
      :total="total"
      v-bind="$attrs"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>

<script>

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    count: {
      type: Number,
      default: 7
    },
    pageSizes: {
      type: Array,
      default () {
        return [10, 20, 30, 40, 50, 100]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      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) {
      /**
       * 場景：API返回總數為25條，按照10條每頁，一共有3頁。選了2的頁數之后，然后把size選擇成30條，
       * 這個時候，分頁就會同時觸發size選擇函數以及current選擇函數。{page: 2, size: 30}，{page: 1, size: 30}請求兩次，會導致列表會有暫無數據的情況
       * 解決辦法：用setTimeout(函數，0)，用延遲，雖然還是兩次請求，但是每次都是{page: 1, size: 30}
       */
      setTimeout(() => {
        this.$emit('pagination', { page: this.currentPage, limit: val })
      }, 0)
      // this.$emit('pagination', { page: this.currentPage, limit: val })
    },
    handleCurrentChange (val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    }
  }
}
</script>

<style lang="scss">
.pagination-container {
  text-align: right;
  background: #fff;
  padding: 32px 0px;
  /* .el-input__inner{
    &:hover{
      border-color:#ebb100!important;
    }
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background:$link-color
  } */
  /* .el-pager{
    .number{
      &:hover{
        color:#ebb100!important;
      }
    }
  } */
}
</style>

頁面中使用

<pagination v-if="total>0" :total="total" :page.sync="pageParam.index" :limit.sync="pageParam.size" @pagination="pagination" :page-sizes="[10, 20, 30, 40, 50, 100, 500]"/>

pagination方法調用列表請求就行