实现简单的纯前端分页

368 阅读1分钟

1.定义总数据分页、获取指定页数据的方法

getListSegment(list) { // list为总的数据  const len = list.length;  const n = this.pageSize;  const lineNum = len % n === 0 ? len / n : Math.floor(len / n + 1);  const res = [];  for (let i = 0; i < lineNum; i++) {    let temp = list.slice(i * n, i * n + n);    res.push(temp);  }  this.listSegment = res; // listSegment为已分好页的二维数组},getListByPage() { //获取每页的数据并页数+1,获取不到返回[]  const data = this.listSegment[this.pageNo - 1];  this.pageNo++;  if (data) {    return data;  } else {    return [];  }}

2.调用方法

this.listOrign = res.data; //res.data为后端返回的总数组this.getListSegment(this.listOrign);this.pageNo = 1;const data = this.getListByPage();this.list = data; // 最终显示的数组