vue分页插件的使用方法

本文实例为大家分享了vue分页插件的具体代码，供大家参考，具体内容如下分页插件代码：

本文实例为大家分享了vue分页插件的具体代码，供大家参考，具体内容如下

分页插件代码：

<div>
 <div class="page">
 <div class="pagelist">
 <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span>
 <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
 <span class="ellipsis" v-show="efont">...</span>
 <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
 @click="jumpPage(num)">{{num}}</span>
 <span class="ellipsis" v-show="ebehind">...</span>
 
 <span :class="{disabled:pend}" class="jump" @click="addPage()">下一页</span>
 <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
 
 <#--<span class="jumppoint">跳转到：</span>-->
 <#--<span class="jumpinp"><input type="text" v-model="changePage"></span>-->
 <#--<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>-->
 </div>
 </div>
</div>

vue代码

data: {
 current_page: result.resultObj.number + 1, //当前页
 pages: result.resultObj.totalPages, //总页数
 changePage: '',//跳转页
 nowIndex: 0
 },
 computed: {
 show: function () {
 return this.pages && this.pages != 1
 },
 pstart: function () {
 return this.current_page == 1;
 },
 pend: function () {
 return this.current_page == this.pages;
 },
 efont: function () {
 if (this.pages <= 7) return false;
 return this.current_page > 5
 },
 ebehind: function () {
 if (this.pages <= 7) return false;
 var nowAy = this.indexs;
 return nowAy[nowAy.length - 1] != this.pages;
 },
 indexs: function () {
 
 var left = 1,
 right = this.pages,
 ar = [];
 if (this.pages >= 7) {
 if (this.current_page > 5 && this.current_page < this.pages -4）{
 left = Number(this.current_page) - 3;
 right = Number(this.current_page) + 3;
 } else {
 if (this.current_page <= 5) {
 left = 1;
 right = 7;
 } else {
 right = this.pages;
 
 left = this.pages - 6;
 }
 }
 }
 while (left <= right) {
 ar.push(left);
 left++;
 }
 return ar;
 },
 },
 methods: {
 jumpPage: function (id) {
 if (id <= this.pages && id >= 1) {
 this.current_page = id;
 loadData(this.current_page - 1, size);
 }
 },
 lessPage: function () {
 this.current_page--;
 loadData(this.current_page - 1, size);
 },
 addPage: function () {
 this.current_page++;
 loadData(this.current_page - 1, size);
 }
}

使用说明：

直接拷贝即可使用，只需要修改总页数、当前页。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。