分页器功能
分析：
1.需要知道当前是第几页。
2.每一页展示的数据是多少条
3.需要知道数据一共有多少条【通过2，3可以知道一共的页数】
4.需要知道页面连续的页码数5|7
在测试阶段：先给分页器假的数据，等分页器测试好以后再连接服务器进行数据的更换
对于分页器而言：一个很重要的地方是要【算出连续页面的起始数字和结束数字】
对于分页器而言：当前页面永远是在中间
在计算分页器的开始页面和结束页面时：有三个bug
1.开始的总页数<连续页码数
2.start开始页数有0或负数
3.end结束页面>总页数
对于分页器来说：需要给上一页、下一页和页面数都添加点击事件，
startNumAndEndNum() {
const { continues, totalPage, pageNo } = this
let start = 0,
end = 0
// 判断不正常现象：总页数小于连续页码
if (continues > totalPage) {
start = 1
end = totalPage
} else {
// 正常现象：总页数大于连续页码
start = pageNo - parseInt(continues / 2) //动态的获取开始页面和结束页面
end = pageNo + parseInt(continues / 2)
// 不正常现象：start开始页面<1，因为开始页面是没有0或负数的
if (start < 1) {
// 如果<1 就将开始页面变成第一页
start = 1
// 结束页面就是连续的页码数
end = continues
}
// 不正常现象：end结束页>总页数
if (end > totalPage) {
// 如果走这个判断的话，就代表的是当前页数是30或31
// 因为只有30 和31 的结束页面会大于总页数
// 但是不管当前页是30还是31，他的开始页数都是27
// 这个27是用总页数-连续页码+1得到的
end = totalPage
start = totalPage - continues + 1
}
}
return{start,end}
}
页数通过v-for循环渲染出来 然后通过点击页面数和上一页下一页触发自定义事件getPageNo并将当前的点击的页码数传递过去
//循环渲染页面数 如果循环的页面数大于等于开始的页面数，就显示
<button
v-for="(page, index) in startNumAndEndNum.end"
:key="index"
v-show="page >= startNumAndEndNum.start"
@click="$emit('getPageNo', page)"
>{{ page }}</button>
//这个...只有当结束页面小于总页数-1的时候才会显示
//如果总页数是31,当前的结束页面是30,但是30和31之间没有相隔任何数字，
//所以这个...就不需要显示
<button
v-show="startNumAndEndNum.end < totalPage - 1"
>···</button>
<button
v-show="startNumAndEndNum.end < totalPage"
@click="$emit('getPageNo', totalPage)"
>{{ totalPage }}</button>
<button
:disabled="pageNo == totalPage"
@click="$emit('getPageNo', pageNo + 1)"
>下一页</button>
通过props给子组件传值 并给子组件添加一个自定义事件
//Pagination就是分页器组件
//pageNo就是当前页数
//pageSize是一页可以显示多少条数据
//total就是总的数据条数
//total就是连续页码数
<Pagination
:pageNo="searchParams.pageNo"
:pageSize="searchParams.pageSize"
:total="total" :continues="5"
@getPageNo="getPageNo"></Pagination>
getPageNo接收一个参数，这个参数就是父组件传递过来的页码数
getPageNo(pageNo) {
// 整理数据 将传递过来的页码数覆盖原来的页码数，然后重新发起请求
this.searchParams.pageNo = pageNo
// 再次发起请求
this.getData()
}
