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=""  //清空跳轉頁的數字
            },