基于 bootstrap 的 vue 分页组件，我想会有那么一部分同学，在使用Vue的时候不使用单文件组件，因为不架设 NodeJS 服务端。那么网上流传的 *.vue 的各种分页组件可能无法使用的，我这里提供一个 *.js 的分页组件，下午刚写的，希望对大家有所帮忙，欢迎下载。
下面是如何使用的示例代码：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8" /> <title>基于 bootstrap 的 vue 分页组件 - 演示</title> <link href="Content/bootstrap.css" rel="stylesheet" /> </head> <body> <div id="app" class="container"> <br /> <h4>基于 bootstrap 的 vue 分页组件 - 演示</h4> <!-- 注：showListBar、showIndexBar 两个属性是可选项，注：="true" 其实是可以省略的 --> <!-- 注：pageSize,barSize,pageSizeList 三个属性是可选项 --> <pager show-list-bar :show-index-bar="true" :page-size="30" :bar-size="10" :page-size-list="[1, 15, 25, 30]" :total="1024" v-model="xxx" @change="pagechange();"></pager> <!-- 注：total、v-model、change基本上来说，算是必选项了 --> <hr /> 当前页: {{ xxx }} </div> <script src="Scripts/vue-2.5.2.min.js"></script> <script src="Scripts/vue-pager-1.0.js"></script> <script> new Vue({ el: "#app", data: function () { return { xxx: 1, } }, methods: { //翻页事件 pagechange: function () { console.log("翻页了：", this.xxx); }, } }); </script> </body> </html>
组件的代码如下：
// 基于 bootstrap 的分页组件 by 周游 // vue-pager-1.0.js Vue.component('pager', { model: { prop: 'pageIndex', event: 'change' }, props: { "total": { required: true, type: Number }, //总记录数 "pageSize": Number, //页大小 "barSize": { type: Number, default:10 }, //页码器上，一次显示几页 "pageIndex": { required: true, type: Number}, //当前页 (v-model) "pageSizeList": { type: Array, default: [10, 20, 30, 50, 100] }, //每页显示多少条的数组 "showListBar": { type: Boolean, default: false }, //显示“每页 X 条”栏 "showIndexBar": { type: Boolean, default: true }, //显示“第几页/共几页”栏 }, data: function () { return { pindex: 1, //当前页 psize: 10, //页大小 } }, computed: { //总页数 （计算值） pcount: function () { return parseInt((this.total - 1) / this.psize) + 1; }, //页码集 indexes: function () { //参数修正 this.pindex = this.pageIndex || 1; if (isNaN(this.pindex)) this.pindex = 1; if (this.pindex < 1) this.pindex = 1; if (this.pindex > this.pcount) this.pindex = this.pcount; //求indexes var left = 1; var right = this.pcount; var bcenter = parseInt(this.barSize / 2); var ar = []; if (this.pcount > this.barSize) { if (this.pindex > bcenter && this.pindex <= this.pcount - bcenter) { left = this.pindex - bcenter right = this.pindex + (bcenter - 1) + (this.barSize % 2); //奇数多显示一页 //console.log("中间的页", this.pindex); } else { if (this.pindex <= bcenter) { left = 1 right = this.barSize; //console.log("当前页是开始几页", this.pindex); } else { right = this.pcount; left = this.pcount - (this.barSize - 1); //console.log("当前页是最后几页", this.pindex); } } } while (left <= right) { ar.push(left) left++ } return ar; }, showLast: function () { return this.pindex != this.pcount }, showFirst: function () { return this.pindex != 1 } }, watch: { //监视如果 pindex 发生变化，就触发 change 事件 pindex: function () { this.pageIndex = this.pindex; this.$emit('change', this.pageIndex); }, }, methods: { //跳转页码 go: function (i) { if (i < 1 || i > this.pcount) return; this.pindex = i; } }, template: '<ul class="pagination">\ <li :class="{disabled:!showFirst}"><a href="javascript:void(0)" @click="go(1)">第一页</a></li>\ <li :class="{disabled:!showFirst}"><a href="javascript:void(0)" @click="go(pindex-1)">上一页</a></li>\ <li v-for="i in indexes" :class="{active:i==pindex}"><a href="javascript:void(0)" @click="go(i)">{{ i }}</a></li>\ <li :class="{disabled:!showLast}"><a href="javascript:void(0)" @click="go(pindex+1)">下一页</a></li>\ <li :class="{disabled:!showLast}"><a href="javascript:void(0)" @click="go(pcount)">第末页</a></li>\ <li v-if="showListBar" class="form-inline"><span>每页 \ <select class="form-control" v-model.number="psize" \ style="padding:0 0px;height:18px;width:48px;text-align:center;margin-top:-4px;" >\ <option v-for="ps in pageSizeList">{{ ps }}</option>\ </select> 条</span></li>\ <li v-if="showIndexBar" class="form-inline"><span>第 <input v-model.number="pindex" type="text" class="form-control" style="padding:0;height:18px;width:42px;text-align:center;margin-top:-4px;" /> 页 / 共{{pcount}}页</span></li>\ </ul>', created: function () { this.psize = this.pageSize || this.psize; //一进来就触发 change 事件 this.$emit('change', this.pageIndex); } });
