element-ui的pagination分页 增加首页和末页

在使用element-ui的pagination分页时，发现没有跳转到首页和末页的功能,那么现在就自己来实现一下这个功能。

实现后如下图所示
先上完整代码

<template>
  <div class="container">
    <el-pagination
      class="rear-page"
      :current-page="tablePage.currentPage"
      :page-sizes="pageSizeArr"
      :page-size="tablePage.pageSize"
      layout="prev, pager, next, slot, jumper, sizes, total"
      :total="tablePage.totalResult"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!-- slot部分，跳转末页 -->
      <button
        class="lastPage"
        :disabled="tablePage.lastPageDisabled"
        @click="toLastPage"
      >
        <i class="el-icon-d-arrow-right"></i>
      </button>
    </el-pagination>
    <el-pagination
      class="ahead-page"
      :current-page="tablePage.currentPage"
      :page-sizes="pageSizeArr"
      :page-size="tablePage.pageSize"
      layout="slot"
      :total="tablePage.totalResult"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!-- slot部分，跳转首页 -->
      <button
        class="firstPage"
        :disabled="tablePage.firstPageDisabled"
        @click="toFirstPage"
      >
        <i class="el-icon-d-arrow-left"></i>
      </button>
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageSizeArr: [10, 20, 30, 40], //  显示条目数组
      tablePage: {
        currentPage: 1, //  当前页
        pageSize: 10, //  展示数量
        totalResult: 100, //  总数
        firstPageDisabled: false, //  首页
        lastPageDisabled: true, //  末页
      },
    };
  },
  watch: {
    // 分页 计算首页和末页
    tablePage: {
      handler(newVal) {
        let pages = Math.ceil(newVal.totalResult / newVal.pageSize);
        if (pages === 0) {
          // 数据(totalResult)为0
          this.tablePage.firstPageDisabled = true; // 首页按钮是否禁用
          this.tablePage.lastPageDisabled = true; // 末页按钮是否禁用
        } else {
          this.tablePage.firstPageDisabled = newVal.currentPage === 1;
          this.tablePage.lastPageDisabled = newVal.currentPage === pages;
        }
      },
      // 一进页面就执行
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //   改变页码
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
    },

    //   改变每页显示数量
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
    },

    //   改变当前页码
    handleCurrentChange(currentPage) {
      this.tablePage.currentPage = currentPage;
    },

    //   前往首页
    toFirstPage() {
      this.handleCurrentChange(1);
    },

    //  前往末页
    toLastPage() {
      let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize);
      this.handleCurrentChange(max);
    },
  },
};
</script>
<style scoped>
.el-pagination {
  float: right;
  margin-top: 10px;
}
.el-pagination.ahead-page {
  padding-right: 0px;
}
.el-pagination.rear-page {
  padding-left: 0px;
}
.firstPage,
.lastPage {
  background-color: white;
  cursor: pointer;
}
</style>

实现的原理是利用slot来自定义内容，就是带有首页和末页的完整分页由两个pagination组件组成

<el-pagination
      class="rear-page"
      :current-page="tablePage.currentPage"
      :page-sizes="pageSizeArr"
      :page-size="tablePage.pageSize"
      layout="prev, pager, next, slot, jumper, sizes, total"
      :total="tablePage.totalResult"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!-- slot部分，跳转末页 -->
      <button
        class="lastPage"
        :disabled="tablePage.lastPageDisabled"
        @click="toLastPage"
      >
        <i class="el-icon-d-arrow-right"></i>
      </button>
    </el-pagination>
    <el-pagination
      class="ahead-page"
      :current-page="tablePage.currentPage"
      :page-sizes="pageSizeArr"
      :page-size="tablePage.pageSize"
      layout="slot"
      :total="tablePage.totalResult"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!-- slot部分，跳转首页 -->
      <button
        class="firstPage"
        :disabled="tablePage.firstPageDisabled"
        @click="toFirstPage"
      >
        <i class="el-icon-d-arrow-left"></i>
      </button>
    </el-pagination>

其他的核心部分

• 判断首页和末页button的disabled属性值

watch: {
    // 分页 计算首页和末页
    tablePage: {
      handler(newVal) {
        let pages = Math.ceil(newVal.totalResult / newVal.pageSize);
        if (pages === 0) {
          // 数据(totalResult)为0
          this.tablePage.firstPageDisabled = true; // 首页按钮是否禁用
          this.tablePage.lastPageDisabled = true; // 末页按钮是否禁用
        } else {
          this.tablePage.firstPageDisabled = newVal.currentPage === 1;
          this.tablePage.lastPageDisabled = newVal.currentPage === pages;
        }
      },
      // 一进页面就执行
      immediate: true,
      deep: true,
    },
  },

如果本文对你有帮助，请点个赞吧！