iview的table+page分页

最新推荐文章于 2025-10-08 05:06:52 发布

原创最新推荐文章于 2025-10-08 05:06:52 发布 · 6.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iview #table #page

本文介绍了一种使用JavaScript实现的高效分页加载数据的方法。通过定义两个数组，totalArr用于存储从后台接口获取的所有数据，dataArr则用于显示当前页面的数据。在数据获取后，根据当前页数和每页数据量计算出数据切片的开始和结束位置，从而实现数据的分页展示。当用户切换页面时，通过changePage函数更新显示的数据。

1.定义俩个数组

totalArr = [];

dataArr = [];

2.获取后台接口的数据之后赋值

this.totalArr = response.data.data;
var _start = ( this.pageIndex - 1 ) * this.pageNum;  //pageIndex 第几页  pageNum:每页几条数据
var _end = this.pageIndex * this.pageNum;
this.dataArr = this.totalArr .slice(_start,_end);

changePage(value){   //改变页数
  this.pageIndex = value;
  var _start = ( value - 1 ) * this.pageNum;
  var _end = value * this.pageNum;
  this.dataArr = this.totalArr .slice(_start,_end);
},