Recently, a project was refactored to implement paging with front page and back page,

​

But Element pagination doesn’t work that way, and the most complete features are as follows

​

I searched a lot on the Internet and found that there are slots for adding custom items, but

    <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"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

There is only one button on the home page. I can’t find the button on the last page

Finally, I had no choice but to achieve this, directly on the code

<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"< p style = "max-width: 100%; clear: both"handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="pager,next,slot,jumper"
      :total="total"
    >
      <el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage"</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>Copy the code

Register the component globally and create index.js in the compones folder

import Vue from 'vue'

import pages from './pages'

Vue.component('pages', pages)Copy the code

Finally, you can import it in main.js

Used in components

        <pages
            :total='fenye.total'
            :currentPage='fenye.pageNum'
            :pageSize='fenye.pageSize'
            @handleSizeChange="handleSizeChange"            @handleCurrentChangeSub="handleCurrentChange"
          ></pages>Copy the code

Or there are deficiencies to be modified