用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;
                     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;
                     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无点只有页码，除以上三种情况外左右两侧...都展示）