持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情juejin.cn/post/714765… Vue中的分页器实现过程
想要实现分页器，有四个点是我们必须要知道的。
pageNum：当前页pageSize：每页展示几条信息total：信息总条数continues：连续页码个数 要实现的具体如下：
很多时候，这种分页器会是异步请求数据，也就是点击哪页就向服务器请求哪页的数据。
很多时候，数据都是从服务器请求回来的，请求回来的数据中会包含total属性，所以可以直接在模板里输出。
先来算出一共有多少页？
思路：总页码数如下
totalPage = Math.ceil(用信息总条数total / 每页展示的条数 pageSize)
如果total/pageSize有余数，剩下的也要占满一页，所以利用Math.ceil方法向上取整。
计算连续页码数的具体数字
- continues通常都是奇数，这样的话会比较美观。
- 所以假设连续页码数需要展示5个。我们首先要计算出开始要展示的页码start和结束的end页码。
- 计算时又分为正常情况和不正常的情况，具体如下：
正常情况：连续页码数continues < totalPage
思路：根据pageNum进行计算。start一定是pageNum-2，end是pageNum+2.但这种情况只是适合连续页码数为5的，所以我们应设置成动态的。
先假设start=0，end=0；再去计算连续页码的开始和结束
start=pageNum-parseInt（continues/2）；//parseInt向下取整
end=pageNum+parseInt（continues/2）；
特殊情况（1）continues > totalPage
有很多时候，会有一些特殊情况，先来说一说。如果continues的个数，大于要展示的总页码数totalPage的话，那么需要让start = 0，end = totalPage；
特殊情况（2）：在正常情况下start < 0
如果start < 0，需要让 start = 1，end = continues;
特殊情况（3）：在正常情况下end > total
如果end大于要显示的总条数total，那么就让end = total，start = total - continues + 1。
- 最后计算出来要把start和end返回。
- 把以上的逻辑全都放在computed里进行处理，这样的话就会成为响应式实时更新。
具体实现代码如下
...的显示与隐藏
- 前面的...元素：添加v-if属性，根据上面返回的结果进行判断，也就是如果start>2的时候就显示
- 后面的...元素：添加v-if属性，通过end进行判断，如果end<totalPage-1时显示
- 上一页元素：在pageNum=1的时候添加disabled属性
- 下一页元素：在end=totalPage的时候添加disabled属性
- 中间的页码其实是通过遍历end生成的，给button绑定点击事件，并把page传到作为参数传到服务器，把请求回来的数据进行渲染。
- 我的例子中的pageNo就是pageNum，所有的数据都是父组件传过来的，注册在了props里进行了使用。所以做点击事件的时候又向父组件传了当前页page
