模拟分页器每5条数据为一组

模拟分页器每5条数据为一组

data(){
	return{
	// 假设这是后台传来的数据来源
      data: [],
      // 所有页面的数据
      totalPage: [],
      // 每页显示数量
      pageSize: 5,
      // 共几页
      pageNum: 1,
      // 当前显示的数据
      dataShow: "",
      // 默认当前显示第一页
      currentPage: 0,
	}
},
created(){
	for(let i=0;i<50;i++){
	this.data.push(i)
	}
	this.pageNum= Math.ceil(this.data.length / this.pageSize) || 1;
  for (let i = 0; i < this.pageNum; i++) {
    // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
    // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
    this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize* (i + 1))
  }
  // 获取到数据后显示第一页内容
  this.dataShow = this.totalPage[this.currentPage]
},
methods:{
	 // 上一页和下一页
    // 下一页
    nextPage() {
      if (this.currentPage === this.pageNum - 1) return;
      this.dataShow = this.totalPage[++this.currentPage];
    },
    // 上一页
    prePage() {
      if (this.currentPage === 0) return;
      this.dataShow= this.totalPage[--this.currentPage];
    },
}