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

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

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















，点击最后一页直接传入总页数