自定义自己想要的样式的分页器，使用Element UI中Pagination 分页器组件，封装成自己想要的组件。

目标，分页器的样式，控制分页器的左右切换的按钮，增加跳到首页与尾页功能

主要想改变选中的颜色，以及增加自定义功能，左右切换的按钮可以使用自己想用的图片，这里使用element ui的图标

直接上代码了

HTML：

<template>
  <div class="pagination">
    <div
      class="pageWord firstPage"
      v-if="currentPage !== 1"
      @click="toFirstPage()"
    >
      首页
    </div>
    <div class="left-arrow" v-if="currentPage !== 1" @click="prevPage()">
      <i class="el-icon-arrow-left" style="color: #1890ff; font-size: 24px"></i>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout=" pager"
      :total="total"
    >
    </el-pagination>
    <div
      class="right-arrow"
      @click="nextPage()"
      v-if="currentPage !== Math.ceil(total / pageSize)"
    >
      <i class="el-icon-arrow-right" style="color: #1890ff; font-size: 24px"></i>
    </div>
    <div
      class="pageWord lastPage"
      v-if="currentPage !== Math.ceil(total / pageSize)"
      @click="toLastPage()"
    >
      尾页
    </div>
  </div>
</template>

JS，主要通过控制 当前页currentPage数据来实现

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    // 跳转到首页
    toFirstPage() {
      this.currentPage = 1
    },
    // 跳转到尾页
    toLastPage() {
      this.currentPage = Math.ceil(this.total / this.pageSize)
    },
    // 左切换
    prevPage() {
      if (this.currentPage === 1) {
        return
      } else {
        this.currentPage--
      }
    },
    // 右切换
    nextPage() {
      if (this.currentPage === Math.ceil(this.total / this.pageSize)) {
        return
      } else {
        this.currentPage++
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

CSS中主要通过/ deep / 深度查找元素 修改样式

​
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  left: -10px;
  transform: all 0.4s;
  .pageWord {
    font-size: 22px;
    font-weight: 400;
    color: #1890ff;
    cursor: pointer;
  }
  .firstPage {
    margin-right: 10px;
  }
  .lastPage {
    margin-left: 10px;
  }
  .left-arrow {
    margin-right: 20px;
  }
  .right-arrow {
    margin-left: 20px;
  }
  .left-arrow,
  .right-arrow {
    cursor: pointer;
  }
  /deep/ .el-pagination {
    .el-pager li:hover {
      color: #1890ff;
    }
    .el-pager {
      .number {
        color: #858585;
        font-size: 22px;
        cursor: pointer;
        transition: all 0.4s;
        margin-left: 17px;
      }

      .number.active {
        font-size: 30px;
        color: #1890ff;
      }
      .number.active::after {
        content: '/';
      }
      .el-icon-more {
        margin-left: 20px;
      }
    }
  }
}
</style>

​

实现结果：