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

最新推荐文章于 2024-08-02 16:35:51 发布

HaiJing1995

最新推荐文章于 2024-08-02 16:35:51 发布

阅读量4.2k

点赞数

分类专栏： vue项目文章标签： vue 项目表格

本文链接：https://blog.csdn.net/HaiJing1995/article/details/73924612

版权

本文介绍了如何在Vue项目中实现表格的分页显示。通过使用v-for循环展示表格行，根据总页数（totlepage）和每页显示的个数动态生成页码。利用current表示当前页，并通过currentHead计算每组开始的页码，head确定页码所在的组。同时，实现了currentIndexHead来控制表格行的显示。文章还提到了上一页、下一页和跳转到指定页的功能，涉及的方法包括previous、next和gopage。

摘要由CSDN通过智能技术生成

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;

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