欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue分页插件的使用方法

程序员文章站 2022-07-06 18:25:18
本文实例为大家分享了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);
   }
}

使用说明:

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

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