使用Vue實現一個分頁組件

分頁是WEB開發中很經常使用的功能，尤爲是在各類先後端分離的今天，後端API返回數據，前端根據數據的count以及當前頁碼pageIndex來計算分頁頁碼並渲染到頁面上已是一個很普通很常見的功能了。從最開始的jquery時代到如今的各類各樣的前端框架時代，分頁功能都是必不可少的。
分頁大多數（基本上）狀況下都是對異步數據列表的處理，這裏首先須要明白一下分頁的流程。
在已知每頁顯示數據量pageSize以及當前頁碼pageIndex的狀況下：

• 請求API，返回第一屏數據（pageSize內）以及全部相關條件的數據總量count

• 將數據總量傳遞給page組件，來計算頁碼並渲染到頁面上

• 點擊頁碼，發送請求獲取該頁碼的數據，返回數據總量count以及該頁碼下的數據條目。

因爲獲取數據條件的變化（假設是個搜索，關鍵詞變了），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}&currentPage=${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>

本文首發於個人博客