Vue分頁元件的封裝方法

<template>
  <div class="pagination">
    <!-- 總頁數 -->
    <div class="total">共{{ total }}條</div>
    <!-- 選擇每頁的條數 -->
    <select name="" id="size_select" v-model="sizes" @change="sizeChange">
      <option v-for="item in pageSizes" :key="item" :value="item">
        {{ item }}條/頁
      </option>
    </select>
    <div class="pagenum">
      <!-- 上一頁 -->
      <el-button
        icon="el-icon-arrow-left"
        :disabled="backDisabled"
        circle
        @click="back"
      ></el-button>
      <!-- 頁碼 -->
      <ul>
        <li
          :class="currentPage == item ? 'active' : ''"
          v-for="(item, index) in pagenum"
          :key="index"
          @click="toPage(item)"
        >
          {{ item }}
        </li>
      </ul>
      <!-- 下一頁 -->
      <el-button
        icon="el-icon-arrow-right"
        :disabled="forwardDisabled"
        circle
        @click="forward"
      ></el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "pagination",
  props: {
    total: {  // 總數
      type: null,
      required: true,
    },
    pageSizes: { // 可選擇的每頁條數
      type: Array,
    },
    pageSize: {  // 每頁顯示的條數
      type: Number,
      required: true,
    },
    currentPage: { // 當前頁
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      sizes: this.pageSize,  // 接收props傳來的pageSize
      nowPage: this.currentPage,  // 接收props傳來的currentPage
    };
  },
  computed: {
    allPage() {  // 計算所有的頁數
      return Math.ceil(this.total / this.pageSize);
    },
    backDisabled() {  // 是否禁用上一頁
      return this.currentPage == 1;
    },
    forwardDisabled() { // 是否禁用下一頁
      return this.currentPage == this.allPage;
    },
    pagenum() {   // 計算顯示不同的頁
      if (this.allPage - this.nowPage > 6) {  //  
        if (this.nowPage > 6) {
          return [
            1,
            "...",
            this.nowPage - 2,
            this.nowPage - 1,
            this.nowPage,
            this.nowPage + 1,
            this.nowPage + 2,
            "...",
            this.allPage,
          ];
        } else {
          if (this.allPage > 8) {
            return [1, 2, 3, 4, 5, 6, "...", this.allPage];
          } else {
            return this.allPage;
          }
        }
      } else {
        if (this.nowPage < 6) {
          return this.allPage;
        } else {
          return [
            1,
            "...",
            this.allPage - 5,
            this.allPage - 4,
            this.allPage - 3,
            this.allPage - 2,
            this.allPage - 1,
            this.allPage,
          ];
        }
      }
    },
  },
  methods: {
    sizeChange() {  // 每頁限制條數改變觸發事件
      this.$emit("sizeChange", this.sizes);
    },
    forward() {  // 點選下一頁
      this.$emit("currentChange", (this.nowPage += 1));
    },
    back() {  // 點選上一頁
      this.$emit("currentChange", (this.nowPage -= 1));
    },
    toPage(val) {  // 點選頁數
      if (val == "...") {
        console.log(2);
      } else {
        this.nowPage = val;
        this.$emit("currentChange", val);
      }
    },
  },
};
</script>