Vue实现表格的翻页显示功能
来源:互联网 发布:java七牛上传图片demo 编辑:程序博客网 时间:2024/05/01 06:39
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; } }
阅读全文
0 0
- Vue实现表格的翻页显示功能
- 翻页功能的实现
- 翻页功能的实现
- 翻页功能的实现
- 这里将介绍两种翻页显示功能的实现:
- 使用Vue.js实现表格的排序和搜索功能
- 实现C++console显示数据表格的功能函数
- web中翻页功能的实现
- extjs实现自动翻页的功能
- (转)翻页功能的实现
- 门户diy实现翻页功能的方法
- QML 实现简单的翻页功能
- EXTJS Grid数据显示、翻页、增删改查功能实现
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- UIWebView 实现翻页功能
- UIWebView 实现翻页功能
- PHP strtotime() 函数
- fast rcnn test.py 测试需要做的修改
- [区间DP] Codeforces 392E Round #230 (Div. 1) E. Deleting Substrings
- js短路运算&& 和 ||
- 1.1 解惑:运放的输入输出电压范围
- Vue实现表格的翻页显示功能
- SSM框架 用ajax实现模糊查询分页和列表
- Hadoop实践(四)---性能调优
- TensorFlow练习13: 制作一个简单的聊天机器人
- php 前一天或后一天的日期
- Hibernate Criteria的 Criterion,Projection,Restrictions等条件设置
- MySQL 实现Oracle序列
- WiFi-Pumpkin无线渗透测试框架实战教程
- ashmem 使用