vue實現分頁器(仿element)
阿新 • • 發佈:2018-12-09
computed:{ // 中間頁陣列 $pages(){ const foldPage = this.foldPage const current = Number(this.current) const halfFoldPage = Math.floor((foldPage-2)/2) if (this.$last > foldPage){ if (current - halfFoldPage > 2){this.showPreMore = true }else { this.showPreMore = false } if (current + halfFoldPage < this.$last){ this.showNextMore = true }else { this.showNextMore = false } } let array= [] // folder1顯示 if (this.showNextMore && !this.showPreMore){ for(let i = 2; i < foldPage; i++){ array.push(i) } // folder1 和 folder2都顯示 }else if ( this.showPreMore && this.showNextMore ){for(let i = current - halfFoldPage; i <= current + halfFoldPage; i++ ){ array.push(i) } // folder2顯示 }else if (!this.showNextMore && this.showPreMore){ // 當folder2顯示的時候,頁碼不能大於$last,需要往前多顯示差額 let dis = current + halfFoldPage - this.$last + 1; for(let i = current - halfFoldPage - dis ; i < this.$last; i++){ array.push(i) } // 都不顯示 }else { for(let i = 2; i < this.$last; i++){ array.push(i) } } return array }, // 總頁數 $last(){ return Math.ceil(this.total/this.size) } }