vue新手缝缝补补分页功能

1. 首先我们写分页需要考虑什么？
   插件用的多了，可能自己也就不去考虑这些了。（这次由于自己半路接到一个项目，原先开发没有用到框架。加上页面较多，所 以只能自己用原生去写）
   a.为了减少频繁的等测试催你改东西，分页加上后，每页显示的个数，跳转页，首页，尾页的跳转
   b.跳转页的页码只能输入数字，大于总页码的时候跳转尾页，为0或者负数时跳转第一页或者不能跳转

2. 废话不多说，直接贴代码
   html代码：

 <div class="fenye clear hide">
                <!-- 每页显示的数据 -->
                  <span style="font-size:16px">每页显示  </span>
                <el-select v-model="value" style="width:8%;height:30px !important;margin-right:30px;padding:1px 1px 2px;" @change="pasizechange">
                 <el-option  style="height:30px !important;"
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
                 <!-- 每页显示的数据 -->
                    <button class="pageup page" @click="tiaofenye(1)">上一页</button>

                    <button class="page yema active2 hide pageqian" @click="tiaofenye(3,$event)"></button>

                    <button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>

                    <button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>

                    <button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>

                    <button class="page yema hide pageqian" @click="tiaofenye(3,$event)"></button>

                    <div class="shengluehao hide">…</div>

                    <button class="page yema hide pagehou" @click="tiaofenye(3,$event)"></button>

                    <button class="pagedown page" @click="tiaofenye(2)"> 下一页</button>

                    <div style="display:inline-block">
                        <input type="text" name="" ref="smallpage" class="page" style="width:50px;">
                        <button class=" page yema " style="width:45px;text-align:left" :disabled="smallpageCheck" @click="tiaofenye(4,$event)"> 前往</button>
                    </div>
                    <button class="pageup page" style="width:50px;" @click="tiaofenye(5)">首页</button>
                    <button class="pagedown page" style="width:50px;" @click="tiaofenye(6)"> 尾页</button>
                </div>

js代码：

 options: [{                          //新添加的分页显示的pageSize数组
                        value: '10',
                        label: '10'
                      }, {
                        value: '20',
                        label: '20'
                      }, {
                        value: '30',
                        label: '30'
                      }, {
                        value: '40',
                        label: '40'
                      }, {
                        value: '50',
                        label: '50'
                      }],
                value: '10',    //新添加的分页显示的pageSize
                smallpageCheck:false, // 控制跳转的禁用
                //上面的是数据个数显示，下面是跳页函数
tiaofenye: function(a, b) {
                if(a == 1) {
                    this.page--;
                } else if(a == 2) {
                    this.page++;
                } else if(a==4){
                    let g=/^[+]{0,1}(\d+)$/;
                    if(this.$refs.smallpage.value==""||!g.test(this.$refs.smallpage.value)){
                        this.smallpageCheck=true;
                    }
                    else if(this.$refs.smallpage.value<=0){
                         this.page =1;
                    }
                    else if(this.$refs.smallpage.value>Math.ceil(this.totallist / this.value )){
                        this.page=Math.ceil(this.totallist / this.value );
                    }
                    else{
                        this.smallpageCheck=false;
                         this.page = Number(this.$refs.smallpage.value);
                    }
                     console.log(this.page)
                }
                else if(a==5){
                    this.page=1;
                }else if(a==6){
                    this.page=Math.ceil(this.totallist / this.value );
                }
                 else {
                    this.page = Number($(b.target).text());
                }
                this.search.pageNo = this.page  //搜素的页码
                this.getCustomer(1); //页面渲染
                this.$refs.smallpage.value=""  //清空跳转页的数字
            },