自定义封装组件(分页器)

自定义封装分页器组件之前需要知道的数据:

1.当前的页码
2.总共多少条数据
3.每页展示多少条数据
4.连续页码数(5|7)
5.总页数

计算连续页码数的起始值和结束值

//通过计算属性来计算出来
computed:{
    startNumAndEndNum(){
      //首先先结构出我们需要的值(当前页码值，总页数，连续页码数)，这个值可以让父组件通过props进行传递
      let {pageNo,totalPage,continues} = this
      //给起始值和结束值赋初始变量
      let start = 0,end = 0;
      //判断当前总页数是否小于连续页码数
      if(totalPage<continues){
        start=1;end=totalPage;
     } else{
        //如果总页数大于连续页码数
        start = pageNo - parseInt(continues/2);
        end = pageNo + parseInt(continues/2);
        //还要判断起始值是否小于1
        if(start<1){
          start = 1;
          end = continues;
        }
        //判断结束值是否大于总页数
        if(end>totalPage){
          end = totalPage;
          start = totalPage - continues +1
        }
     }
      return {start,end}
   }
 }

剩下我们就可以遍历结束值，让遍历出来的值大于等于起始值显示，否则隐藏，这样连续页码数的值就有了，再根据其他接收到的值进行渲染页面就可以了

发送请求切换页面？

通过绑定自定义事件，通过传入当前的页码数发送请求，点击上一页，传入当前的页码数-1，点击下一页，传入当前的页码数+1，点击最后一页直接传入总页数

标签：end,自定义,页数,start,起始值,组件,封装,页码
来源： https://www.cnblogs.com/ljybg/p/jy.html