Vue中BootStrap實現表格分頁功能（頁碼過多時帶省略號）
阿新 • • 發佈：2018-12-12
1、首先需要在vue-cli專案中配置bootstrap,jquery 2、 然後新建vue檔案,如index.vue，index.vue內容如下： 3、配置路由即可執行實現。
<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>點選數</th> <th>點選數</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{ //為第一頁或者最後一頁時，首頁，尾頁不能點選 fDisabled:false, lDisabled:false, //總專案數 totalCount: 200, //分頁數 pageCount: 20, //當前頁面 pageCurrent: 1, //分頁大小 pagesize: 10, //顯示分頁按鈕數 showPages: 11, //開始顯示的分頁按鈕 showPagesStart: 1, //結束顯示的分頁按鈕 showPageEnd: 100, //分頁資料 arrayData: [] } }, methods:{ showPage(pageIndex, $event, forceRefresh){ if (pageIndex > 0) { if (pageIndex > this.pageCount) { pageIndex = this.pageCount; } //判斷資料是否需要更新 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; } //處理分頁點中樣式 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"); } } //測試資料 隨機生成的 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; //如果當前頁首頁或者尾頁，則上一頁首頁就不能點選，下一頁尾頁就不能點選 if(this.pageCurrent===1){ this.fDisabled=true; }else if(this.pageCurrent===this.pageCount){ this.lDisabled=true; }else{ this.fDisabled=false; this.lDisabled=false; } //計算分頁按鈕資料 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> 作者：肖爾_ 連結：https://www.jianshu.com/p/a54011ff610a 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
來源於：