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>复制代码

或有不足之处尚待修改