前端分页（后端一次性返回所有数据）

最新推荐文章于 2024-12-04 16:30:04 发布

原创最新推荐文章于 2024-12-04 16:30:04 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种实现前端数据分页的方法，通过`this.alllist`一次性获取所有数据，并在页码或每页数量改变时，利用`slice`方法动态更新`this.datalist`来展示相应页面的数据。

1.请求接口接收数据
一次性获取所有数据
this.alllist
展示列表数据
this.datalist

2.当页码改变

pagenum_change(num) {
		this.pagenum = num;
		this.datalist = this.alllist.slice(
	        (this.pagenum - 1) * this.pageSize,
	        this.pagenum * this.pageSize
      );
  }

3.当每页数量改变时

pagesize_change(size) {
      this.pageSize = size;
      this.datalist = this.alllist.slice(
        (this.pagenum - 1) * this.pageSize,
        this.pagenum * this.pageSize
      );
    },