分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。
分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：
请求API，返回第一屏数据（pageSize内）以及所有相关条件的数据总量count
将数据总量传递给page组件，来计算页码并渲染到页面上
点击页码，发送请求获取该页码的数据，返回数据总量count以及该页码下的数据条目。
由于获取数据条件的变化（假设是个搜索，关键词变了），count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。
了解了流程，在Vue中实现一个分页组件也就变得简单了。
简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，以及尾页按钮；超出范围的页码以…来代替，效果图如下：
由于获取数据条件的变化（假设是个搜索，关键词变了），count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。
了解了流程，在Vue中实现一个分页组件也就变得简单了。
简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，以及尾页按钮；超出范围的页码以…来代替，效果图如下：
分页组件
template
<template> <ul> <!-- prev --> <li :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]" @click="prev">prev</li> <!-- first --> <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">first</li> <li :class="['paging-item', 'paging-item--more']" v-if="showPrevMore">...</li> <li :class="['paging-item', {'paging-item--current' : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li> <li :class="['paging-item', 'paging-item--more']" v-if="showNextMore">...</li> <!-- last --> <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">last</li> <!-- next --> <li :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]" @click="next">next</li> </ul> </template>
style(scss)
.mo-paging { display: inline-block; padding: 0; margin: 1rem 0; font-size: 0; list-style: none; user-select: none; > .paging-item { display: inline; font-size: 14px; position: relative; padding: 6px 12px; line-height: 1.42857143; text-decoration: none; border: 1px solid #ccc; background-color: #fff; margin-left: -1px; cursor: pointer; color: #0275d8; &:first-child { margin-left: 0; } &:hover { background-color: #f0f0f0; color: #0275d8; } &.paging-item--disabled, &.paging-item--more{ background-color: #fff; color: #505050; } //禁用 &.paging-item--disabled { cursor: not-allowed; opacity: .75; } &.paging-item--more, &.paging-item--current { cursor: default; } //选中 &.paging-item--current { background-color: #0275d8; color:#fff; position: relative; z-index: 1; border-color: #0275d8; } } }
javascript
export default { name : 'MoPaging', //通过props来接受从父组件传递过来的值 props : { //页面中的可见页码，其他的以...替代, 必须是奇数 perPages : { type : Number, default : 5 }, //当前页码 pageIndex : { type : Number, default : 1 }, //每页显示条数 pageSize : { type : Number, default : 10 }, //总记录数 total : { type : Number, default : 1 }, }, methods : { prev(){ if (this.index > 1) { this.go(this.index - 1) } }, next(){ if (this.index < this.pages) { this.go(this.index + 1) } }, first(){ if (this.index !== 1) { this.go(1) } }, last(){ if (this.index != this.pages) { this.go(this.pages) } }, go (page) { if (this.index !== page) { this.index = page //父组件通过change方法来接受当前的页码 this.$emit('change', this.index) } } }, computed : { //计算总页码 pages(){ return Math.ceil(this.size / this.limit) }, //计算页码，当count等变化时自动计算 pagers () { const array = [] const perPages = this.perPages const pageCount = this.pages let current = this.index const _offset = (perPages - 1) / 2 const offset = { start : current - _offset, end : current + _offset } //-1, 3 if (offset.start < 1) { offset.end = offset.end + (1 - offset.start) offset.start = 1 } if (offset.end > pageCount) { offset.start = offset.start - (offset.end - pageCount) offset.end = pageCount } if (offset.start < 1) offset.start = 1 this.showPrevMore = (offset.start > 1) this.showNextMore = (offset.end < pageCount) for (let i = offset.start; i <= offset.end; i++) { array.push(i) } return array } }, data () { return { index : this.pageIndex, //当前页码 limit : this.pageSize, //每页显示条数 size : this.total || 1, //总记录数 showPrevMore : false, showNextMore : false } }, watch : { pageIndex(val) { this.index = val || 1 }, pageSize(val) { this.limit = val || 10 }, total(val) { this.size = val || 1 } } }
父组件中使用