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