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

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

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