用vue寫一個分頁器代碼

分頁是項目中常會用到的，網上的插件也很多，但是有些功能太齊全反而不是必要的，所以抽時間自己寫了一下(小白寫代碼，若發現問題還請及時賜教，感激不盡……)

如圖，想要一個這樣的頁碼：

　　a. 上一頁、下一頁固定展示

　　b. 第一頁、最后一頁固定展示

　　c. 中間，即：左右...之間需要展示的頁碼個數可自定義

　　d. 可任意選擇頁面展示數據條數

一、不需要展示 ，只展示頁碼，需要定義3個變量：pageNum（當前頁碼）、totalNum（總頁碼）、middleSize（中間，即左右...之間需要展示的頁碼 個數）

　　1、totalNum <= middleSize+2時，只顯示1,2,3,4沒有...，（為什么是totalNum <= middleSize+2，而不是totalNum <= middleSize，這是因為第一個、最后一頁是固定展示的），totalNum=7，middleSize=5，展示情況如下圖：

　　2、pageNum <= middleSize時，右側...顯示，totalNum=8，middleSize=5，展示情況如下圖：

　　3、pageNum >= totalNum - ( middleSize - 1 )時，左側...顯示，totalNum=100, middleSize=5，展示情況如下圖：

 

　　4、除以上3種情況，左右兩側...都展示，那中間頁碼如何展示，代碼如下：

// ④ 展示左右兩側的'...'
let pages = [1, '...'];
// 當左右兩側的...都展示時，中間的頁碼該如何展示呢？其實就是 當前頁碼 - (中間要展示頁碼的個數/2向下取整) 到 當前頁碼 + (中間要展示頁碼的個數/2向下取整)即可
const half = Math.floor(this.middleSize/2); // 向下取整
 for(let i=this.pageNum-half; i<=this.pageNum+half; i++) {
    pages.push(i);
}
pages.push('...');
pages.push(this.totalNum);
return pages;        

二、左側頁面展示條數代碼實現較簡單，可查看全部代碼：

<template>
    <div class="pageContainer">
        <!-- 當前頁面展示多少條數據 -->
        <div class="pageSizeInner">
            <div class="totalCount">共 {{totalCount}} 條</div>
            <div class="pageSize">
                <select v-model="perPageCount" @change="changePerPageCount">
                    <option :value="item" v-for="(item, index) in page_size" :key="index">{{item}}</option>
                </select>
            </div>
        </div>

        <!-- 頁碼部分 -->
        <ul class="pagesInner">
            <!-- 上一頁 -->
            <li class="page" :class="{noClick : pageNum == 1}" @click="preOrNext(-1)">
                <span>上一頁</span>
            </li>
            <!-- 頁碼 -->
            <li class="page" :class="{actived : item === pageNum}" v-for="(item, index) in displayPages" :key="index" @click="select(item)">
                <span>{{item}}</span>
            </li>
            <!-- 下一頁 -->
            <li class="page" :class="{noClick : pageNum == totalNum}" @click="preOrNext(1)">
                <span>下一頁</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                totalCount: 9999,                                              // 總共多少條數據
                page_size: ['100條/頁', '200條/頁', '300條/頁', '400條/頁'],    // 每頁展示多少條數據
                pageNum: 1,                                                    // 當前頁碼
                totalNum: 20,                                                  // 總頁碼
                middleSize: 5,                                                 // 中間顯示幾個頁碼
                perPageCount: 0,                                               // 每頁展示多少條數據
            }
        },
        computed: {
            // 展示頁碼
            displayPages() {
                // ① 只展示'上一頁'、'頁碼'、'下一頁'
                if(this.totalNum <= this.middleSize + 2) {
                    let pages = [];
                    for(let i=1; i<=this.totalNum; i++) {
                        pages.push(i);
                    }
                    return pages;
                }else if(this.pageNum <= this.middleSize) { // this.pageNum <= this.middleSize+2
                    // ② 只展示右側'...'，只要當前頁碼小於或者等於要展示的中間頁碼時就展示
                    let pages = [1];
                    for(let i=2; i<this.middleSize+1; i++) {
                        pages.push(i);
                    }
                    pages.push('...');
                    pages.push(this.totalNum);
                    return pages;
                }else if(this.pageNum >= this.totalNum - (this.middleSize - 1)) {
                    // ③ 只展示左側'...'，主要當前頁碼 大於或等於 總頁碼-(中間要展示頁碼的個數 - 1)就展示
                    let pages = [1, '...'];
                    for(let i=this.totalNum-this.middleSize+1; i<=this.totalNum; i++) {
                        pages.push(i);
                    }
                    return pages;
                }else {
                    // ④ 展示左右兩側的'...'
                    let pages = [1, '...'];
                    // 當左右兩側的...都展示時，中間的頁碼該如何展示呢？其實就是 當前頁碼 - (中間要展示頁碼的個數/2向下取整) 到 當前頁碼 + (中間要展示頁碼的個數/2向下取整)即可
                    const half = Math.floor(this.middleSize/2); // 向下取整
                    for(let i=this.pageNum-half; i<=this.pageNum+half; i++) {
                        pages.push(i);
                    }
                    pages.push('...');
                    pages.push(this.totalNum);
                    return pages;                    
                }
            }
        },
        mounted() {
            // 每頁展示多少條數據
            this.perPageCount = this.page_size[0];
            // 計算總頁碼是多少
            this.totalNum = Math.ceil(this.totalCount/parseInt(this.perPageCount));
        },
        methods: {
            // 點擊'上一頁'、'下一頁'
            preOrNext(n) {
                this.pageNum = this.pageNum + n;
                this.pageNum <= 1 ? this.pageNum = 1 : this.pageNum > this.totalNum ? this.pageNum = this.totalNum : null;
                // 作為子組件，當前頁碼發生改變時需要通知父組件
                // this.$emit('pageNumChanged', this.pageNum);
            },
            // 點擊'頁碼'
            select(item) {
                if(typeof item === 'string') return;
                if(item == this.pageNum) return;
                this.pageNum = item;
                // 作為子組件，當前頁碼發生改變時需要通知父組件
                // this.$emit('pageNumChanged', this.pageNum);
            },
            // 選擇頁面展示條數，重新計算總頁碼
            changePerPageCount() {
                this.totalNum = Math.ceil(this.totalCount/parseInt(this.perPageCount));
            }
        }
    }
</script>

<style lang="scss" type="text/css">
    .pageContainer {
        display: flex;
        justify-content: space-between;
        .pageSizeInner {
            padding-top: 9px;
            .totalCount {
                display: inline-block;
                margin-right: 5px;
            }
            .pageSize {
                display: inline-block;
                >select {
                    padding: 0 3px;
                    width: 100px;
                    height: 30px;
                    font-size: 12px;
                    border: 1px solid #eee;
                    border-radius: 2px;
                    box-sizing: border-box;
                    outline: none;
                }
            }
        }
        .pagesInner {
            display: inline-block;
            text-align: center;
            font-size: 0;
            li {
                display: inline-block;
                margin: 5px;
                list-style: none;
                >span {
                    display: block;
                    width: 46px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    font-size: 12px;
                    border: 1px solid #eee;
                    border-radius: 5px;
                    cursor: pointer;
                }
                &.noClick {
                    >span {
                        cursor: no-drop;
                        // border-color: transparent;
                    }
                }
                &.actived {
                    >span {
                        border-color: #2d8cf0;
                        background-color: #2d8cf0;
                        color: #fff;
                    }
                }
            }
        }
    }
</style>

 

（注：記住一個原則就可實現分頁，右點左側頁碼個數 = middleSize， 左點右側頁碼個數 = middleSize，totalNum<=middleSize+2無點只有頁碼，除以上三種情況外左右兩側...都展示）