Vue项目分页器

 分页器组件

接收传入的四个数据：pageNo、pageSize、total、continues

点击页码：触发父组件的自定义事件 getPageNo  传入要跳转的页码数

<template>
  <div class="pagination">
    <button :disabled="pageNo === 1" @click="setTotal(pageNo - 1)">
      上一页
    </button>
    <button v-if="startNum.start > 1" @click="setTotal(1)">1</button>
    <button v-if="startNum.start > 2">···</button>

    <button
      v-for="num in startNum.end"
      v-show="num >= startNum.start"
      :style="num === pageNo ? 'color:red; border: 1px solid red ' : ''"
      :key="num"
      @click="setTotal(num)"
    >
      {{ num }}
    </button>
    <button v-if="startNum.end < totalPage - 1">···</button>
    <button v-if="startNum.end < totalPage" @click="setTotal(totalPage)">
      {{ totalPage }}
    </button>
    <button :disabled="pageNo == totalPage" @click="setTotal(pageNo + 1)">
      下一页
    </button>

    <button style="margin-left: 30px">共 {{ total }} 条</button>
  </div>
</template>
  
  <script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],

  mounted() {
    this.startNum;
  },
  computed: {
    // 总页数(向上取整)
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 页码起始结束数字
    startNum() {
      /*
        连续起始和结束页有四种情况：
            1)总页小于连续页
                起始页 = 1  
                结束页 = 总页

            2)总页大于等于连续页
                起始页 = 当前页 - 2(连续页不是固定的，索引不能直接 - 2)
                结束页 = 当前页 - 取整(连续页/2)  start = pageNo - parseInt(continues / 2);

            3)起始页小于1
                起始页 = 1    
                结束页 = 连续页

            4)结束页大于总页
                起始页 = 1    
                结束页 = 总页

      */
      const { continues, totalPage, pageNo } = this;
      let start = 0,
        end = 0;
      // 总页数小于连续页数
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        // 正常情况
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
        if (start < 1) {
          start = 1;
          end = continues;
        }
        if (end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return { start, end };
    },
  },
  methods: {
    // 触发自定义事件 传当前页码
    setTotal(pageNo) {
      this.$emit("getPageNo", pageNo);
    },
  },
};
</script>

父组件给子组件传入参数

传入的参数：当前页码、每页数据条数、总数据条数、连续页码数

<!-- 分页 -->
<Pagination
   :pageNo="searchParams.pageNo"
   :pageSize="searchParams.pageSize"
   :total="total"
   :continues="5"
   @getPageNo="getPageNo"
></Pagination>