分頁是WEB開發中很常用的功能，尤其是在各種前后端分離的今天，后端API返回數據，前端根據數據的count以及當前頁碼pageIndex來計算分頁頁碼并渲染到頁面上已經是一個很普通很常見的功能了。從最開始的jquery時代到現在的各種各樣的前端框架時代，分頁功能都是必不可少的。
分頁大多數（基本上）情況下都是對異步數據列表的處理，這里首先需要明白一下分頁的流程。
在已知每頁顯示數據量pageSize以及當前頁碼pageIndex的情況下：
由于獲取數據條件的變化（假設是個搜索，關鍵詞變了），count是不定的；再或者，有個select下拉框，來控制每頁顯示的數據量pageSize，當它變化的時候，總頁碼肯定也是要變化的。因此很多情況下要重新計算頁碼并渲染。
了解了流程，在Vue中實現一個分頁組件也就變得簡單了。
簡單處理，樣式類似于bootstrap的分頁組件，在第一頁時，禁用上一頁，以及首頁按鈕；在最后一頁時，禁用下一頁，以及尾頁按鈕；超出范圍的頁碼以…來代替，效果圖如下：
由于獲取數據條件的變化（假設是個搜索，關鍵詞變了），count是不定的；再或者，有個select下拉框，來控制每頁顯示的數據量pageSize，當它變化的時候，總頁碼肯定也是要變化的。因此很多情況下要重新計算頁碼并渲染。
了解了流程，在Vue中實現一個分頁組件也就變得簡單了。
簡單處理，樣式類似于bootstrap的分頁組件，在第一頁時，禁用上一頁，以及首頁按鈕；在最后一頁時，禁用下一頁，以及尾頁按鈕；超出范圍的頁碼以…來代替，效果圖如下：
分頁組件
template
<template> <ul class="mo-paging"> <!-- 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 } }}父組件中使用
<template> <div class="list"> <template v-if="count"> <ul> <li v-for="item in items">...</li> </ul> <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange"> </mo-paging> </template> </div></template><script> import MoPaging from './paging' export default { //顯示的聲明組件 components : { MoPaging }, data () { return { pageSize : 20 , //每頁顯示20條數據 currentPage : 1, //當前頁碼 count : 0, //總記錄數 items : [] } }, methods : { //獲取數據 getList () { //模擬 let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}` this.$http.get(url) .then(({body}) => { //子組件監聽到count變化會自動更新DOM this.count = body.count this.items = body.list }) }, //從page組件傳遞過來的當前page pageChange (page) { this.currentPage = page this.getList() } }, mounted() { //請求第一頁數據 this.getList() } }</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
