前端代码:

 <div class="exam_item" v-for="item in dataShow" :key="item.id">
 	<div>{{item.name}}</div>
 </div>

JS代码:

data() {
	return {
		tableData: [],
	    totalPageData: [], // 分页数据(全部数据已经分好页)
	    pageNum: 1, // 共几页
	    pageSize: 5, // 每页显示数量
	    currentPage: 1, // 当前显示页码
	    total: 1, // 总共多少条数据
	    dataShow: [], // 当前页要显示的数据
	}
}
// 获取接口数据
getDataList() {
  dataList().then((res) => {
    this.tableData = res.data.data;
    this.total = res.data.data.length;
    this.calcPageData();
  });
},
// 计算页数的方法
calcPageData() {
  // 计算页数,根据后台数据的条数和每页要显示的数量算出一共多少页,得0时设为1
  if (this.tableData.length > 1) {
    this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1;
    // console.log("总页数:" + this.pageNum);
  }
  //数据分组
  for (let i = 0; i < this.pageNum; i++) {
    // 每页相当于一个数据,例如:[[],[],[]]
    // 根据每页显示数量,将后台的数据分割到每一页,假设pageSize为5,则第一也为1-5条slice(0,5),slice(5,10)...
    this.totalPageData[i] = this.tableData.slice(
      this.pageSize * i,
      this.pageSize * (i + 1)
    );
  }

  // 获取到数据后显示第一页内容,数组下标是从0开始的,这里一定 要减去1,不然会丢失一组数据
  this.dataShow = this.totalPageData[this.currentPage - 1];
},
// 分页
handleSizeChange(val) {
  this.pageSize = val;
  // 重新计算页数并分组
  this.calcPageData();
},
handleCurrentChange(val) {
  this.currentPage = val;
  // 注意数组是从0开始,页码别忘了减去1
  this.dataShow = this.totalPageData[val - 1];
  this.calcPageData();
},
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐