分页器的封装

效果图

 

 get获得的参数（通过父组件传递到子组件）：

        pageNo: 当前页数

        pageSize:每页多少条数据

        total:数据总条数

        continues：连续页码数

计算出来的数：totalPage 总页数 =向上取整Math.ceil(this.total/this.pageSize)

拓展知识：

 $emit 子组件可以使用 $emit 触发父组件的自定义事件

 

父组件GET请求参数
    getPageNo(pageNo){
      // 整理带给服务器参数
      this.searchParams.pageNo=pageNo;
      // 再次发请求
      this.getData()
    },

子组件HTML部分
<template>
  <div class="pagination">
    <!-- 上一页  
    当前页为1时，上一页不可点击；
    点击上一页，页数-1并且再次向服务器请求数据-->
    
    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
      上一页
    </button>

    <!-- startNumAndEndNum.start连续页码的起始数字大于1时显示
        点击1，页数回到1并且再次向服务器请求数据
        当当前页=1时，增加点击样式active-->
    <button
      v-if="startNumAndEndNum.start > 1"
      @click="$emit('getPageNo', 1)"
      :class="{ active: pageNo == 1 }"
    >1</button>
    
    <!-- 当前连续页码起始为3时，···显示-->
    <button v-if="startNumAndEndNum.start > 2">···</button>
    

    <!-- 页码 
         页数循环至连续页码结束值，当页码数大于连续起始页显示，
         所以显示页码数为连续页码的起始页-->

    <button
      v-for="(page, index) in startNumAndEndNum.end"
      :key="index"
      v-if="page >= startNumAndEndNum.start"  <!-- 页码数大于连续起始页显示-->
      @click="$emit('getPageNo', page)"
      :class="{ active: pageNo == page }"
    >{{ page }}</button>

    <!-- 下一页 -->
    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
    <button
      v-if="startNumAndEndNum.end < totalPage"
      @click="$emit('getPageNo', totalPage)"
      :class="{ active: pageNo == totalPage }"
    >{{ totalPage }}</button>

    <button
      :disabled="pageNo == totalPage"
      @click="$emit('getPageNo', pageNo + 1)"
    >下一页</button>
  </div>
</template>

 

子组件JS部分
<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "countinues"],
  computed: {
    //   总共多少页
    totalPage() {
      // 向上取整
      return Math.ceil(this.total / this.pageSize);
    },
    //   计算出连续的页码的起始数字与结束数字[连续页码的数字至少是5]
    startNumAndEndNum() {
      const { countinues, pageNo, totalPage } = this;
      // 先定义两个变量存储起始数字与结束数字
      let start = 0,end = 0;
      // 连续页码数字5[至少是5页]，如果出现少于5页 起始页为1，结束页为页码数
      if (countinues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        // 正常页码，代码连续页数大于5 pageNo当前页码 countinues连续页数
        start = pageNo - parseInt(countinues / 2);
        end = pageNo + parseInt(countinues / 2);
        // 把start数字出现0|负数  纠正
        if (start < 1) {
          start = 1;
          end = countinues;
        }
        // 把end大于总页数的
        if (end > totalPage) {
          end = totalPage;
          start = totalPage - countinues + 1;
        }
      }
      return { end, start };
    },
  },
};
</script>