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

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

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，点击最后一页直接传入总页数