vue 分页器组件--可根据自己随便调改，简单易懂

这是自己写的一个vue 分页器组件，里面的样式有点丑，有需要的可以自己修改，写的简单易懂,

这是子组件，分页器的主体,这里的10是每页的显示的个数，根据个人实际情况来定

<template>
  <div class="pager-wrapper">
    <div>
      共
      <span>{
   
   {this.total}}</span>
      条
    </div>
    <button
      class="pager-button"
      @click="prev()"
      v-if="{'disabled':prevDisable}"
      :class="{'pager-disabled':prevDisable}"
    ><</button>
    <div v-for="i in tt" :key="i">
      <span class="pager-span" v-if="i==currentPage" @click="current(i)">{
   
   {i}}</span>
      <span class="pager-s" v-else-if="currentPage<5&&(i)<6" @click="current(i)">{
   
   {i}}</span>
      <span
        v-else-if="total<7||i==1||i==total||(currentPage-2<=i&&i<=currentPage+2)"
        class="pager-s"
        @click="current(i)"
      >{
   
   {i}}</span>
      <div v-else>
        <span v-if="currentPage<5&&i==6" :key="i" class="pager-spr">…</span>
        <span v-if="currentPage==4&&i==7" :key="i" class="pager-spr">…</span>
        <span v-if="currentPage>4&&i==currentPage-3" :key="i" class="pager-spr">…</span>
        <span v-if="currentPage>4&&i==currentPage+3" :key="i" class="pager-spr">…</span>
      </div>
    </div>
    <button class="pager-button" @click="next()" :class="{'pager-disabled':nextDisable}">></button>
    <div class="pager-input">
      <input type="text" class="pager-text" v-model="cuse" />
      <button @click="Go()">GO</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 1
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      cuse: this.total
    }
  },
  computed: {
    prevDisable() {
      if (this.currentPage > 1) {
        return false
      } else {
        return true
      }
    },
    nextDisable() {
      if (this.currentPage < this.total && this.total > 1) {
        return false;
      } else {
        return true;
      }
    },
    tt() {
      let count = 1
      count = Math.floor(this.total / 10)
      if (this.total % 10 == 0) {
        return count
      } else {
        count += 1
        return count
      }

    }

  },
  methods: {
    prev() {
      console.log("上一页")
      if (this.currentPage == 1) {
        return
      } else {
        this.$emit("handleSizeChange", this.currentPage - 1)
      }
    },
    next() {
      console.log("下一页")
      if (this.currentPage >= this.tt) {
        return
      } else {
        this.$emit("handleSizeChange", this.currentPage + 1)
      }
    },
    current(val) {
      console.log(val)
      if (val > this.tt) {
        val = this.tt
      }
      this.$emit('handleSizeChange', val);
    },
    Go() {
      if (this.cuse == '') {
        return;
      } else if (/^\d*$/.test(parseInt(this.cuse))) {
        this.current(parseInt(this.cuse));
        this.cuse = '';
      } else {
        this.cuse = '';
        return;
      }
    }
  },
  mounted() {


  },
}
</script>

<style scoped >
.pager-wrapper {
  display: flex;
}
.pager-wrapper .pager-button {
  font-size: 12px;
  width: 20px;
  height: 20px;
  border: 0px solid;
}
.pager-wrapper .pager-disabled {
  background-color: silver;
}

.pager-wrapper .pager-span {
  display: block;
  width: 20px;
  height: 20px;
  /* border: 1px solid; */
  text-align: center;
  border-radius: 0.1px;
  background: turquoise;
  color: white;
  margin: 0 5px;
}
.pager-wrapper .pager-s {
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: aliceblue;
  margin: 0 3px;
}
.pager-input .pager-text {
  width: 80px;
}
</style>

父组件的代码，把子组件引进来，传参和方法

<pager :total="total" :currentPage="currentPage" @handleSizeChange="handleSizeChange"></pager>

  handleSizeChange(val) {
         console.log(val)
         this.currentPage = val
   }

参考的博客：https://blog.csdn.net/web_xiaolei/article/details/81136791
element-ui https://element.eleme.cn/#/zh-CN/component/pagination