element-ui 分页 首页 尾页

1、要求分页有首页和尾页按钮，界面UI使用的是element ui，但是在其组件说明中并没有首页 尾页的用法，于是自己在element ui 的分页组件基础上简单封装下

代码如下：

<template>
  <el-pagination
 class="fr"
 ref="pagination"
 background
 layout="prev, pager, next, slot, total"
 :total="total"
 :page-size="pageSize"
 :current-page="pageNo"
 @current-change="handleChange"
 >
    <div class="slot-default">
      <button type="button" @click="jumpFirstPage" :class="{disabled: total <= 0, active: pageNo == 1 && total > 0}" class="btn-first">首页</button>
      <button type="button" @click="jumpLastPage" :class="{disabled: total <= 0 || totalPageNum == 1, active: pageNo >1 && pageNo == totalPageNum}" class="btn-last">尾页</button>
    </div>
  </el-pagination>
</template>

<script>
export default {
  props: {
    total: {
      require: true
 },
 pageSize: {
      require: true

 },
 pageNo: {
      require: true
 }
  },
 created () {
  },
 computed: {
    totalPageNum () {
      return Math.ceil(this.total / this.pageSize);
 }
  },
 methods: {
      jumpFirstPage () {
// console.log('pageNo1::', this.pageNo)
 this.$refs.pagination.handleCurrentChange(1);
 this.$emit('handleCurrentChange', 1);
// console.log('pageNo2::', this.pageNo)

 },
 jumpLastPage () {
// console.log('pageNo3::', this.pageNo)
 this.$refs.pagination.handleCurrentChange(this.totalPageNum);

 this.$emit('handleCurrentChange', this.totalPageNum);
// console.log('pageNo4::', this.pageNo)

 },
 handleChange (currentPage) {
// console.log(this.$refs.pagination.handleCurrentChange)

 this.$emit('handleCurrentChange', currentPage);
 }
  }
};
</script>

<style lang='scss' rel="stylesheet/scss" type="text/scss">
.el-pagination {
  position: relative;
 padding: 2px 0 2px 50px;

 &.is-background {
    .btn-prev, .btn-next, .btn-first, .btn-last {
      background-color: #fff;
 }
    ul.el-pager li.number {
      background-color: #fff;
 &.active {
        background-color: #8398CA;
 }
    }
  }

  .slot-default {
    display: inline-block;
 width: 60px;
 }

  .btn-first {
    position: absolute;
 top: 50%;
 left: 0;
 border-radius: 2px;
 margin: -14px 5px 0;
 color: #606266;

 &.disabled {
      color: #c0c4cc;
 }

    &.active {
      background-color: #8398CA;
 color: #fff;
 }
  }

  .btn-last {
    border-radius: 2px;
 margin: 0 5px;
 color: #606266;

 &.disabled {
      color: #c0c4cc;
 }

    &.active {
      background-color: #8398CA;
 color: #fff;
 }
  }
}

</style>