咨询电话:
15628812133
30
2025/08

vue中前端自行分页的方法

发布时间:2025-08-30 09:47:33
发布者:dzw
浏览量:
0

前端会遇到许多数据处理的情况,包括后端给的数据不符合预期,或者缺少某些重要数据的时候,如果可行前端也可以通过计算和处理数据弥补这些不足,尤其是后端不能灵活的处理所需数据的时候。

之前遇到了一个问题,有一个页面的数据非常的多,大概1000条左右,而后端没有传递条码和页数返回相应的内容的时候,前端同时展示出来会导致页面卡顿,这里我们就可以通过计算,实现前端自行分页。

image

这里我们使用element的分页,属性如下page-size(每页显示数),current-page(当前页数),total(总页数),我们使用的方法为slice(),w3c对他的解释如下:简单的说就是截取数组。

image

实现思路为:当获取到巨量数据的时候,不要展示,而是通过某个字段存储起来,展示的仅仅为:page-size(每页显示数)* current-page(当前页数),每当需要进行分页的时候,重新计算并通过截取数组来展示新的类目。需要注意,我们的数据是从0-10开始的,但是页数是从1开始的,我们需要给这个页数-1,否则初始就是从10开始了。

image

说到slice,其实还有另一种截取方法splice,不过这个方法主要用于删除元素,删除除了需要展示页面数据的其他数据,不过相比slice,这个方法有点本末倒置了。

image

了解更多vue知识点击这里

上一篇: 项目打包后echarts生成的json地图消失怎么办
下一篇: 没有了
关键词:
返回列表