封装分页 不能直接到达很大页号的最后一页（比如1万条数据）

  因为后端不能做到直接到很大数据的最后几页或者最后一页，element的都是自带最后一页的，所以自己封装了一个

<template>
  <div class="jspagination flex">
    <p class="total">共&nbsp;{{ total }}&nbsp;条</p>
    <el-select v-model="value" @change="valueChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="m-l20 total cursor" @click="goOne" v-if="currentTotal > 9">
      首页
    </div>
    <div class="flex m-l10">
      <span
        :class="
          currentPage === 1 || currentbox.length === 1
            ? 'cur_disable'
            : 'cursor'
        "
        @click="prev"
      >
        <i class="el-icon-arrow-left bold"></i
      ></span>
      <div class="numbox">
        <div class="flex">
          <p
            v-for="(item, index) in currentbox"
            :key="index"
            class="num cursor"
            :class="currentPage == item ? 'active' : ''"
            @click="number(item)"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <span
        class="cursor"
        @click="next"
        :class="
          total === 0 ||
          currentbox.length === 1 ||
          currentPage === currentbox.length
            ? 'cur_disable'
            : 'cursor'
        "
      >
        <i class="el-icon-arrow-right bold"></i
      ></span>
    </div>
    <p class="m-l10 dqdjy">
      当前第&nbsp;&nbsp;<i style="font-size:20px;color: #000">{{
        currentPage
      }}</i
      >&nbsp;&nbsp;页&nbsp;&nbsp;&nbsp;
    </p>
  </div>
</template>

<script>
import { forEach } from "jszip";
export default {
  name: "Jspagination",
  components: {},
  props: ["total"],
  data() {
    return {
      options: [
        {
          value: 10,
          label: "10条/页"
        },
        {
          value: 20,
          label: "20条/页"
        },
        {
          value: 30,
          label: "30条/页"
        }
      ],
      value: 10,
      currentPage: 1,
      currentbox: [],
      totalbox: [],
      currentTotal: 0,
      num: 0
    };
  },
  computed: {},
  watch: {
    total() {
      if (this.total) {
        // 向上取整
        this.currentTotal = Math.ceil(this.total / this.value);
        this.totalbox = [];
        this.currentbox = [];
        this.currentPage = 1;
        if (this.currentTotal > 9) {
          for (let i = 1; i < this.currentTotal + 1; i++) {
            this.totalbox.push(i);
          }
          this.currentbox = this.totalbox.slice(0, 9);
        } else if (this.currentTotal < 9) {
          for (let i = 1; i < this.currentTotal + 1; i++) {
            this.currentbox.push(i);
            this.totalbox.push(i);
          }
        }
      } else {
        this.totalbox = [];
        this.currentbox = [];
        this.currentPage = 1;
        this.currentbox.push(1);
        this.totalbox.push(1);
      }
    }
  },
  created() {
    if (this.total) {
      // 向上取整
      this.currentTotal = Math.ceil(this.total / this.value);
      this.totalbox = [];
      this.currentbox = [];
      this.currentPage = 1;
      if (this.currentTotal > 9) {
        for (let i = 1; i < this.currentTotal + 1; i++) {
          this.totalbox.push(i);
        }
        this.currentbox = this.totalbox.slice(0, 9);
      } else if (this.currentTotal < 9) {
        for (let i = 1; i < this.currentTotal + 1; i++) {
          this.currentbox.push(i);
          this.totalbox.push(i);
        }
      }
    } else {
      this.totalbox = [];
      this.currentbox = [];
      this.currentPage = 1;
      this.currentbox.push(1);
      this.totalbox.push(1);
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    checkData() {
      // 如果选中的页号大于5，总页数大于9
      if (this.currentPage > 5 && this.totalbox.length > 9) {
        this.currentbox = this.totalbox.slice(
          this.currentPage - 5,
          this.currentPage + 4
        );
      } else if (this.currentPage > 5 && this.totalbox.length <= 9) {
        // 如果选中的页号大于5，总页数小于等于9
        this.currentbox = this.totalbox.slice(0, this.totalbox.length);
      } else if (this.currentPage <= 5 && this.totalbox.length > 9) {
        // 如果选中的页号下于5，总页数大于等于9
        this.currentbox = this.totalbox.slice(0, 9);
      } else if (this.currentPage <= 5 && this.totalbox.length <= 9) {
        // 如果选中的页号大于5，总页数小于等于9
        this.currentbox = this.totalbox.slice(0, this.totalbox.length);
      }
      this.$emit("handleCurrentChange", this.currentPage);
    },
    goOne() {
      this.number(1);
    },
    number(item) {
      this.currentPage = item;
      this.checkData();
    },
    // 上一页
    prev() {
      if (this.currentPage > 1) {
        this.currentPage -= 1;
      }
      if (this.currentPage === 1) {
        return;
      }
      this.checkData();
    },
    // 下一页
    next() {
      if (this.currentPage < this.currentTotal) {
        this.currentPage += 1;
      }
      if (this.currentPage === this.totalbox.length) {
        return;
      }
      this.checkData();
    },
    valueChange() {
      this.currentTotal = Math.ceil(this.total / this.value);
      this.totalbox = [];
      this.currentbox = [];
      if (this.currentTotal > 9) {
        for (let i = 1; i < this.currentTotal + 1; i++) {
          this.totalbox.push(i);
        }
        this.currentbox = this.totalbox.slice(0, 9);
      } else {
        for (let i = 1; i < this.currentTotal + 1; i++) {
          this.currentbox.push(i);
          this.totalbox.push(i);
        }
      }
      this.currentPage = 1;
      this.$emit("handleSizeChange", this.value);
    }
  }
};
</script>

<style scoped lang="scss">
.cur_disable {
  color: #c0c4cc;
  cursor: not-allowed;
}
.bold {
  font-weight: bold;
}
.active {
  color: #409eff;
}
.jspagination {
  line-height: 32px;
  .total {
    margin-right: 10px;
    font-weight: 400;
    color: #606266;
  }
  .numbox {
    margin: 0px 15px;
    max-width: 274px;
    overflow: hidden;
  }
  .num {
    display: inline-block;
    margin: 0px 9px;
    font-weight: bold;
  }

  .dqdjy {
    line-height: 25px;
    margin-right: 10px;
    font-weight: 400;
    color: #606266;
  }
  /deep/ .el-select {
    width: 106px;
  }
}
</style>