1、首先需要在vue-cli項(xiàng)目中配置bootstrap,jquery

2、 然后新建vue文件,如index.vue，index.vue內(nèi)容如下：

3、配置路由即可運(yùn)行實(shí)現(xiàn)。

<template>  <div class="tTable container body-content">    <div class="form-group">      <div class="form-group">        <div class="page-header">          表格        </div>        <table class="table table-bordered table-responsive table-striped">          <thead>          <tr>          <th>時間</th>          <th>點(diǎn)擊數(shù)</th>          <th>點(diǎn)擊數(shù)</th>          </tr>          </thead>          <tbody>          <tr v-for="item in arrayData">            <td>{{item.timestamp}}</td>            <td>{{item.count}}</td>            <td>{{item.count}}</td>          </tr>          </tbody>        </table>        <div class="pager" id="pager">          <span class="form-inline">            <select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)" number>              <option value="10">10</option>              <option value="20">20</option>              <option value="30">30</option>              <option value="40">40</option>            </select>          </span>          <span v-for="item in pageCount+1">            <span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)" :class="{'disabled':fDisabled}">              首頁            </span>            <span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)" :class="{'disabled':fDisabled}">              上一頁            </span>            <span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)">              {{item}}            </span>            <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">              ...            </span>            <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">              {{item}}            </span>            <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">              ...            </span>            <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(item,$event)" >              {{item}}            </span>            <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)" :class="{'disabled':lDisabled}">              下一頁            </span>            <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)" :class="{'disabled':lDisabled}">              尾頁            </span>          </span>          <span>{{pageCurrent}}/{{pageCount}}</span>        </div>      </div>    </div>  </div> </template> <script > export default {  data(){    return{         //為第一頁或者最后一頁時，首頁，尾頁不能點(diǎn)擊        fDisabled:false,        lDisabled:false,         //總項(xiàng)目數(shù)        totalCount: 200,        //分頁數(shù)        pageCount: 20,        //當(dāng)前頁面        pageCurrent: 1,        //分頁大小        pagesize: 10,        //顯示分頁按鈕數(shù)        showPages: 11,        //開始顯示的分頁按鈕        showPagesStart: 1,        //結(jié)束顯示的分頁按鈕        showPageEnd: 100,        //分頁數(shù)據(jù)        arrayData: []    }  },  methods:{    showPage(pageIndex, $event, forceRefresh){      if (pageIndex > 0) {        if (pageIndex > this.pageCount) {          pageIndex = this.pageCount;        }        //判斷數(shù)據(jù)是否需要更新        var currentPageCount = Math.ceil(this.totalCount / this.pagesize);        if (currentPageCount != this.pageCount) {          pageIndex = 1;          this.pageCount = currentPageCount;        }        else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof (forceRefresh) == "undefined") {          console.log("not refresh");          return;        }        //處理分頁點(diǎn)中樣式        var buttons = $("#pager").find("span");        for (var i = 0; i < buttons.length; i++) {          if (buttons.eq(i).html() != pageIndex) {            buttons.eq(i).removeClass("active");          }          else {            buttons.eq(i).addClass("active");          }        }        //測試數(shù)據(jù) 隨機(jī)生成的        var newPageInfo = [];        var time=new Date();        for (var i = 0; i < this.pagesize; i++) {          newPageInfo[newPageInfo.length] = {            timestamp: time,            count: (i + (pageIndex - 1) * 20)          };        }        this.pageCurrent = pageIndex;        this.arrayData = newPageInfo;        //如果當(dāng)前頁首頁或者尾頁，則上一頁首頁就不能點(diǎn)擊，下一頁尾頁就不能點(diǎn)擊         if(this.pageCurrent===1){            this.fDisabled=true;          }else if(this.pageCurrent===this.pageCount){            this.lDisabled=true;          }else{             this.fDisabled=false;             this.lDisabled=false;          }        //計(jì)算分頁按鈕數(shù)據(jù)        if (this.pageCount > this.showPages) {          if (pageIndex <= (this.showPages - 1) / 2) {            this.showPagesStart = 1;            this.showPageEnd = this.showPages - 1;            console.log("showPage1")          }          else if (pageIndex >= this.pageCount - (this.showPages - 3) / 2) {            this.showPagesStart = this.pageCount - this.showPages + 2;            this.showPageEnd = this.pageCount;            console.log("showPage2")          }          else {            console.log("showPage3")            this.showPagesStart = pageIndex - (this.showPages - 3) / 2;            this.showPageEnd = pageIndex + (this.showPages - 3) / 2;          }        }        console.log("showPagesStart:" + this.showPagesStart + ",showPageEnd:" + this.showPageEnd + ",pageIndex:" + pageIndex);      }    }  },  mounted(){    this.showPage(this.pageCurrent, null, true);  },  computed:{  }} </script>