vue自定义分页器

分页器需要的条件

1. pageNo第几页
2. pageSize每页展示多少条数据
3. total一共展示多少条数据
4. continues分页器连续的个数（比如分页器展示5条或者7条，一般是奇数，为了左右平均，对称好看）

计算 分页器的总页数：Math.ceil(this.total/this.pageSize)

computed:{
      totalPage(){
        // 向上取整 (总数据/每页显示的数据)
        return Math.ceil(this.total/this.pageSize);
      },
      startNumAndEenNum(){
        const {pageNo,totalPage,continues}=this;
        let end=0,start=0;
        // 总页数很少的情况下,连续页数大于总页数
        if(continues>totalPage){
          start=1;
          end=totalPage;
        }
        // 数据正常的情况下
        else{
          // 当前页数 减去 连续页数除2 ，比如5-2得到3，start是3
          start=pageNo-parseInt(continues/2);
          end=pageNo+parseInt(continues/2);
          // 如果start小于1会出现负数的情况
          if(start<1){
            start=1;
            // 结束值直接等于总页数
            end=continues
          }
          // 如果end的数超过了总页数
          if(end>totalPage){
            // 起始值为：总页-连续再+1，比如100页，start=100-5+1为96
            start=totalPage-continues+1;
            end=totalPage
          }
        }
        return {start,end};
      }
    }

动态展示部分：

html结构分为三部分，上 中 下。

<div class="pagination">
    <button>上一页</button>
    <button v-if="startNumAndEenNum.start>1">1</button>
    <button v-if="startNumAndEenNum.start>2">···</button>
    <!-- 将startNumAndEenNum.end的数据遍历，-->
      <!-- 为什么是end呢？因为start一般是1，而end是总数  -->
      <!-- 如何拿到自己要的数据？通过v-if处理,展示当前大于等于start的值， -->
      <!-- 比如6开始，则page>=6的展示 -->
    <button v-for="(page,index) in startNumAndEenNum.end"
            v-if="page>=startNumAndEenNum.start" :key="index">
      {{ page }}
    </button>
    
    <button v-if="startNumAndEenNum.end<totalPage-1">···</button>
    <!--end小于totalPage展示页才出现，如果大于或者等于就不展示 -->
    <button v-if="startNumAndEenNum.end<totalPage">{{ totalPage }}</button>
    <button>下一页</button>
    
    <button style="margin-left: 30px">页码：共 {{ totalPage }} 条</button>
  </div>