Vue实现表格的翻页显示功能

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HaiJing1995/article/details/73924612

Vue实现表格的翻页显示功能

先简单介绍下用到的变量含义及大致思路:
表格的tr是用v-for=(item, index) in data循环显示的
下面的显示数字页是用v-for=page in totlepage循环显示的
totlepage:一共的页数。也就是Math.ceil(数据的个数 / 每页显示的个数);
page:表示第几页。也就是下面的数组1、2、3、4、5…
current:表示当前的页数。当page==current时,给a一个active类名,标红一下。
currentHead:我将下面的数字显示分为5个一组,及12345一组,678910一组,这里的currentHead就是每组中的第一个数字,1,6,11…
head:表示当前页属于第几组,Math.floor(this.current/5),注意像5,10这样this.current%5==0的,head需要减去1
这样我们就能得到currentHead = head*5 + 1;

接下来就是控制下面页数数字的显隐

<li v-for="page in totlepage" v-show="page >= currentHead && page < currentHead+5">

currentIndexHead:这个变量和之前的currentHead差不多,这里我设置每页显示6个tr,所以currentIndexHead就是索引值1,7,13…

接下来就是控制表格tr的显隐

<tr v-for="(item,index) in data" v-model="item.id" v-show="index+1 >= currentIndexHead && index+1 < currentIndexHead+6">

然后我们需要实现翻页功能需要三个方法,上一页previous,下一页next,去到特定页gopage(page)

//跳转到指定页
      gopage: function(page) {
        this.current = page;
        var head = Math.floor(this.current/5);
        var rem = this.current % 5;
        if(rem == 0) {
          head -= 1;
        }
        if(head >= 1) {
          this.currentHead = head * 5 + 1;
        }
        this.currentIndexHead = 6*(page-1)+1;
      },
      //下一页
      next: function(){
        if(this.current < this.totlepage) {
          this.current += 1;
          var head = Math.floor(this.current/5);
          var rem = this.current % 5;
          if(rem == 0) {
            head -= 1;
          }
          if(head >= 1) {
            this.currentHead = head * 5 + 1;
          }
          this.currentIndexHead += 6;
        }
      },
      previous: function(){
        if(this.current > 1) {
          this.current -= 1;
          var head = Math.floor(this.current/5);
          var rem = this.current % 5;
          if(rem == 0) {
            head -= 1;
          }
          if(head >= 1) {
            this.currentHead = head * 5 + 1;
          }
          this.currentIndexHead -= 6;
        }
      }
展开阅读全文

没有更多推荐了,返回首页