1. 程式人生 > >vue實現分頁器(仿element)

vue實現分頁器(仿element)

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) } }