最近重构一个项目，需要实现带有首页，末页的分页功能，

但是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
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="total,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
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    total(newVal, oldVal) {
      this.total = newVal;
      this.lastPageNum = Math.ceil(newVal / this.pageSize);
    }
  },
  created() {},
  methods: {
    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'
            @handleCurrentChangeSub="handleCurrentChange"
          ></pages>

或有不足之处尚待修改