Vue2.0分頁查詢封裝組件（PC端）

本文主要介紹Vue2.0如何封裝分頁查詢的組件

一、業務場景
1.1適用於Vue，PC端使用的小夥伴，養成封裝的習慣，可以方便你我他。
1.2案例展示圖

二、完整代碼
2.1組件頁面
在src\components目錄下創建Pager.vue

<template>
  <div class="pager-wrapper" ref="pager">
    <div class="pager-box">
      <span class="pager-prev" :class="{'pager-disabled':prevDisable}" @click="jumpPrev()">上一頁</span>
      <div v-for="(i,index) in pageSize" :key="index">
        <span v-if="i==pageNo" class="pager-curr">
          <em class="pager-em"></em>
          <em>{{i}}</em>
        </span>
        <span class="pager-discurr" v-else-if="pageNo<5&&(i)<6" @click="jump(i)">{{i}}</span>
        <span
          class="pager-discurr"
          v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2) || (pageNo > pageSize - 4 && i > pageSize - 5)"
          @click="jump(i)"
        >{{i}}</span>
        <template v-else>
          <span v-if="pageNo<5&&i==6" class="pager-spr">…</span>
          <span v-if="pageNo==4&&i==7" class="pager-spr">…</span>
          <span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>
          <span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>
          <span v-if="pageNo > pageSize - 5 && i > pageSize - 6" class="pager-spr">…</span>
        </template>
      </div>
      <span class="pager-next" :class="{'pager-disabled':nextDisable}" @click="jumpNext()">下一頁</span>
    </div>
    <div class="pager-input">
      <span class="input-tip">共{{pageSize}}頁，到第</span>
      <input class="input-item" type="text" v-model.trim="jumpPage" />
      <span class="input-tip">頁</span>
      <span
        class="pager-btn-go"
        :class="{'pager-disabled':!(jumpPage&&jumpPage.length)}"
        @click="Go()"
      >確定</span>
    </div>
  </div>
</template>
<script>
export default {
  model: {
    //通過v-model傳過來的參數
    prop: "pageNo",
    event: "jumpPage"
  },
  props: {
    pageSize: {
      type: Number,
      default: 1
    },
    pageNo: {
      //通過v-model傳過來的參數
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      jumpPage: "" //避免操作props參數
    };
  },
  computed: {
    prevDisable: function() {
      //“上一頁”按鈕是否可點
      if (this.pageNo > 1) {
        return false;
      } else {
        return true;
      }
    },
    nextDisable: function() {
      //“下一頁”按鈕是否可點
      if (this.pageNo < this.pageSize && this.pageSize > 1) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    jumpPrev: function() {
      //點擊上一頁
      if (this.pageNo == 1) {
        return;
      } else {
        this.$emit("jumpPage", this.pageNo - 1);
        this.$emit("on-jump", this.pageNo - 1);
      }
    },
    jumpNext: function() {
      //點擊下一頁
      if (this.pageNo == this.pageSize) {
        return;
      } else {
        this.$emit("jumpPage", this.pageNo + 1); //修改當前頁碼
        this.$emit("on-jump", this.pageNo + 1); //跳轉
      }
    },
    jump: function(id) {
      //直接跳轉
      if (id > this.pageSize) {
        id = this.pageSize;
      }
      this.jumpPage = "";
      this.$emit("jumpPage", id); //修改當前頁碼
      this.$emit("on-jump", id); //跳轉
    },
    Go: function() {
      if (this.jumpPage == "") {
        //判空處理
        return;
      } else if (/^\d*$/.test(parseInt(this.jumpPage))) {
        //填寫數字才能跳轉
        this.jump(parseInt(this.jumpPage));
        this.jumpPage = "";
      } else {
        this.jumpPage = "";
        return;
      }
    }
  }
};
</script>
<style scoped lang="less">
.pager-wrapper {
  display: flex;
  .pager-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .pager-prev,
    .pager-next {
      width: 60px;
      height: 28px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      cursor: pointer;
      &.pager-disabled {
        color: #999;
      }
    }
    .pager-curr {
      width: 40px;
      height: 28px;
      background: rgba(216, 30, 33, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 8px;
      cursor: pointer;
    }
    .pager-discurr {
      width: 40px;
      height: 28px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      cursor: pointer;
    }
    .pager-spr {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-right: 8px;
    }
  }
  .pager-input {
    display: flex;
    align-items: center;
    justify-content: center;
    .input-tip {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 14px;
    }
    .input-item {
      width: 40px;
      height: 28px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      margin: 0 8px;
      text-align: center;
    }
    .pager-btn-go {
      width: 60px;
      height: 28px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
      cursor: pointer;
      &.pager-disabled {
        color: #999;
      }
    }
  }
}
</style>

2.2列表頁List.vue頁面件引入pager.vue

<template>
	<div class="pager-wrapper">
	    <pager :pageSize="pageSize" v-model="pageNo" @jump="jump"></pager>
	</div>
</template>

import pager from "@/components/pager.vue";
export default {
  components: {
    pager
  },
   data() {
    return {
      pageSize: 0, // 總頁數
      pageNo: 1, // 當前頁
     }
   },
    methods: {
    jump(id) {
      this.pageNo = id;
    }
   }
}

友情提供-總頁數計算公式

this.pageSize = Math.ceil(res.totalNum / this.pages);

更新日誌

20200620-更新日誌
1.完善分頁查詢，當頁面爲最後5頁時的條件處理。