vue+element pagination分頁的二次封裝，帶首頁末頁功能（更新版）

最近重構一個項目，須要實現帶有首頁，末頁的分頁功能，

​

可是element的pagination並無這樣子，最完整功能以下

​

網上搜索了好多，發現有slot能夠增長自定義項，可是

<el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="total,slot,prev,pager,next,slot, jumper"
      :total="total"
      :firstPage='firstPage'
      :lastPage='lastPage'
    >
      <el-button
        :disabled="currentPageNum === firstPage"
        class="first-pager"
        @click="toFirstPage"
      >首頁</el-button>
      <el-button
        :disabled="currentPageNum === lastPage"
        class="last-pager"
        @click="toLastPage"
      >末頁</el-button>
    </el-pagination>複製代碼

這樣卻並不能實現，只能出現一個首頁的button，實在是找不到末頁的button哪裏去了，不知道是否是隻能帶一個slot

最後無奈只能這樣實現了，直接上代碼了

<template>
  <div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      layout="total,sizes,slot,prev"
      :total="total"
    >
      <el-button :disabled="firstPageBtnDisabled" class="first-pager" @click="toFirstPage">首頁</el-button>
    </el-pagination>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="pager,next,slot,jumper"
      :total="total"
    >
      <el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage">末頁</el-button>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'pages',
  components: {},
  data() {
    return {
      currentPageNum: this.currentPage,
      firstPageBtnDisabled: true,
      lastPageBtnDisabled: false,
      lastPageNum: Math.ceil(this.total / this.pageSize)
    }
  },
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: function() {
        return [10, 20, 50, 100]
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    total(newVal, oldVal) {
      this.total = newVal
      this.lastPageNum = Math.ceil(newVal / this.pageSize)
    }
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.firstPageBtnDisabled = val === 1 ? true : false
      this.lastPageBtnDisabled = val === this.lastPageNum ? true : false
      this.currentPageNum = val
      this.$emit('handleCurrentChangeSub', val)
    },
    toFirstPage(val) {
      this.handleCurrentChange()
    },
    toLastPage(val) {
      this.currentPageNum = this.lastPageNum
      this.handleCurrentChange(this.lastPageNum)
    }
  },
  created() {},
  mounted() {},
  destroyed() {}
}
</script>
<style>
.el-pagination {
  float: left;
}
</style>複製代碼

全局註冊一下組件，在compones文件夾下新建index.js

import Vue from 'vue'

import pages from './pages'

Vue.component('pages', pages)複製代碼

最後在main.js中引入就能夠了

在組件中使用

<pages
            :total='fenye.total'
            :currentPage='fenye.pageNum'
            :pageSize='fenye.pageSize'
            @handleSizeChange="handleSizeChange"            @handleCurrentChangeSub="handleCurrentChange"
          ></pages>複製代碼

或有不足之處尚待修改