Mimic elementUI and use it at the bottom

<!--分页器代码-->
<template>
  <div class="fr page">
    <div class="pagination">
      <button
          :disabled="myCurrentPage <= 1"
          :class="{cursor: myCurrentPage <= 1 }"
          @click="setCurrentPage(myCurrentPage - 1)"
      >
        上一页
      </button>
      <button :class="{ active: myCurrentPage === 1 }" @click="setCurrentPage(1)">
        1
      </button>
      <button v-show="startEnd.start > 2" @click="setCurrentPage(startEnd.start)">...</button>
      <button
          ref="btn"
          v-for="item in mapBtnsCount"
          :key="item"
          @click="setCurrentPage(startEnd.start + item - 1)"
          :class="{ active: myCurrentPage === startEnd.start + item - 1 }"
      >
        {{ startEnd.start + item - 1 }}
      </button>
      <button
          v-show="startEnd.end < totalPages - 1"
          @click="setCurrentPage(startEnd.end)"
      >...
      </button>
      <button
          :class="{ active: myCurrentPage === totalPages }"
          v-show="totalPages > 1"
          @click="setCurrentPage(totalPages)"
      >
        {{ totalPages }}
      </button>
      <button
          :disabled="myCurrentPage >= totalPages"
          @click="setCurrentPage(myCurrentPage + 1) "
          :class="{cursor: myCurrentPage >= totalPages}"
      >
        下一页
      </button>
      <span class="goPage">
        前往
        <div>
          <input type="number" v-model.lazy.number="goPageInput">
        </div>
      </span>
      <!--  选择一页显示几条数据    -->
      <select v-model="countData" class="select">
        <option v-for="list of pageSizes" :key="list" :value="list">{{ list }}条/页</option>
      </select>
      <span class="total">共{{ total }}条</span>
    </div>
  </div>
</template>

<script
export default {
  name: "Pagination",
  // 声明数据类型并接收
  props: {
    // 当前页码
    currentPage: {
      type: Number,
      default: 1,
    },
    // 要显示页码的数字 一般 7 就行了 奇数
    pagerCount: {
      type: Number,
      validator(val) {
        // 验证,验证通过才会有用
        // 大于等于 5 且小于等于 21 的奇数
        // 返回true验证成功,
        // 返回false验证失败
        return val >= 5 && val <= 21 && val % 2 === 1;
      },
      default: 7  
    },
    // 每页显示多少条数据
    pageSize: {
      type: Number,
      default: 5
    },
    // 更改每页显示几条数据
    pageSizes: {
      type: Array,
      default() {
        return [5, 10, 15, 20]
      }
    },
    // 总页数
    total: {
      type: Number,
      // required: true
      default: 0
    }
  },
  data() {
    return {
      // 为了方便修改myCurrentPage,定义data数据  响应式数据
      // 原因:props数据只读不能修改
      myCurrentPage: this.currentPage
      // goPage: 1,
    }
  },
  // 侦听器 监听某一个属性的值
  watch: {
    // 用于调用父组件传递的事件 修改总页数
    myCurrentPage(currentPage) {
      // this.$listeners['current-change'](currentPage)
      // 执行自定义事件
      this.$emit("currentChange", currentPage)
    },
    // 更新页码
    currentPage(currentPage) {
      this.myCurrentPage = currentPage
    },
  },
  computed: {
    // 修改一页显示多少条数据
    countData: {
      get() {
        // 父组件传递的页码
        return this.pageSize
      },
      set(val) {
        // 更新页码
        this.$emit('currentPageSize', val)
      }
    },
    // 总页数
    totalPages() {
      // 向上取整 即小数部分直接舍去,并向正数部分进1 用总数据条数 / 每页数量
      return Math.ceil(this.total / this.pageSize)
    },
    // 计算中间按钮的开始和结束的按钮值
    startEnd() {
      const {myCurrentPage, pagerCount, totalPages} = this
      // 中间start-end总计的按钮数量(不包含开头和结尾)
      const count = pagerCount - 2;
      // 中间的一半 向下取整  即小数部分直接舍去
      const halfCount = Math.floor(count / 2)
      let start, end;
      /*
       start 开头
         1. start = myCurrentPage - halfCount
           1...3 4 [5] 6 7...10
              3   =       5       -    2
           问题:
             1 [2] 3 4 5 6 ...10
              0    =      2        -    2
           解决:修正start的值,不能小于1
           问题:
             1 ... 5 6 7 8 [9] 10
             7  =   9  - 2

       end 结尾
         2. end = start + count - 1
           1...3 4 [5] 6 7...10
              7   =  3  +  5 - 1

        1 [2] 3 4 5 6 ...10
        1...3 4 [5] 6 7...10
        1 ... 5 6 7 8 [9] 10
        1 [2] 3
        [1] --> 如果start大于总页数,不显示
        */

      if (myCurrentPage >= totalPages - halfCount) {
        //1 ... 5 6 7 8 [9] 10
        start = totalPages - count
      } else {
        // 正常情况
        start = myCurrentPage - halfCount
      }

      if (start <= 1) {
        start = 2
      }

      // 正常情况
      end = start + count - 1;
      if (end >= totalPages) {
        // 1 [2] 3
        end = totalPages - 1
      }

      // 返回计算结果
      return {
        start,
        end
      }
    },
    // 跳转页码输入框的值
    goPageInput: {
      get() {
        return this.myCurrentPage
      },
      set(value) {
        // 判断输入的值,边界值
        if (value < 1) {
          value = 1
        } else if (value > this.totalPages) {
          value = this.totalPages
        }
        this.myCurrentPage = parseInt(value)
        // 更新页码
        this.setCurrentPage(value)
      }
    },
    // 总共要遍历的按钮数量
    mapBtnsCount() {
      // 解构赋值
      const {start, end} = this.startEnd
      // 用最终的页码 - 最小的页码 + 1
      const count = end - start + 1
      return count >= 1 ? count : 0
    }
  },
  methods: {
    // 更新页码
    setCurrentPage(currentPage) {
      this.goPage = currentPage
      this.myCurrentPage = currentPage
      // 返回顶部参照京东
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="less" scoped>
// 超过设定最大边界 结束与开始把鼠标样式更改
.cursor {
  cursor: not-allowed !important;
}

//选择一页显示多少条数据的样式
.select {
  background-color: #FFF;
  border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  outline: 0;
  padding: 0 5px;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  border-radius: 3px;
  font-size: 13px;
}

.total {
  display: inline-block;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 10px;
  font-weight: 400;
  color: #606266;
}

.page {
  width: 100%;
  height: 66px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  display: flex;
  white-space: nowrap;
  font-weight: 700;
  align-items: center;

  button {
    margin: 0 5px;
    padding: 0 4px;
    font-size: 13px;
    min-width: 30px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: none;
    outline: none;
    display: block;
    background-color: #f4f4f5;
    color: #606266;
    border-radius: 2px;
  }
}

// 去除number类型表单的上下箭头
input::-webkit-inner-spin-button {
  -moz-appearance: textfield;
  -webkit-appearance: none !important;
}

.goPage {
  display: inline-block;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  margin-right: 10px;
  vertical-align: top;
  box-sizing: border-box;

  div {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 50px;
    line-height: 18px;
    padding: 0 2px;
    height: 28px;
    text-align: center;
    margin: 0 2px;
    box-sizing: border-box;
    border-radius: 3px;

    input {
      text-align: center;
      line-height: normal;
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 28px;
      line-height: 28px;
      outline: none;
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      width: 100%;

    }
  }
}

button.active {
  background-color: #409eff;
  color: #fff;
}
</style>
Copy the code

use

<div> /* <Pagination ref=" Pagination CurrentChange ="currentChange" // update page number :currentPage="options.pageNo" // currentPage number :pageSize="options.pageSize" // number of pages per page : pagerCount = "7" / / the default 7 | | just an odd number of not less than 5 general 7: pageSizes = ",10,15,20 [5] / / to modify each page shows a few data: total = "total" / > total * / / / data <Pagination ref="pagination" @currentPageSize="currentPageSize" @currentChange="currentChange" :currentPage="options.pageNo" :pageSize="options.pageSize" :pagerCount="7" :pageSizes="[5,10,15,20]" :total="total" /> </div> <script > export default {data() {return {options: {pageNo: 1, // pageSize: 5 // number per page}, total:0 // Total number}}, methods:{// Request for data async getOrderLists() {let {pageNo, PageSize} = this.options let {code, data, message} = await this.$api.center. getOrderLists(pageNo, pageSize) if (code ! = = 200) {this. $message. The error message (| | 'failed to get the order) return} / / assignment again this. Total quantity of total = data. The total / / submit the goods orders this.orderList = data.records }, CurrentChange (pageNo) {this.options.pageNo = pageNo this.getorderLists ()}, CurrentPageSize (pageSize) {this.options.pageSize = pageSize; Let pageNo = math.ceil (this.total/this.options.pagesize) // If you change the number of pages displayed on each page and then change the default page number again, the data request will be automatically called // If (pageNo >= this.options.pageNo) {pageNo = this.options.pageNo} // Determine new (page) end value === old end value (page) If (pageNo === this.options.pageno) {// Call to get data request this.getorderLists ()} // update the page number this.options.pageno = pageNo // Update pager component input box value this. $refs. Pagination. GoPageInput = pageNo / / the page assignment is empty pageNo = null},}} < / script >Copy the code