Vue实现分页

Vuea中实现分页效果

1，分析需求

实现分页，简而言之就是对一组数据按照一定长度进行分割。在点击上一页，下一页以及数字的时间请求相应被切割的数据。

2，定义字段

  //   对应的数据集合
  totalPage: any = [];
  //   每页显示的数量
  pageSize = 10;
  // 共几页
  pageNum = 1;
  //显示的数据
  dataShow = "";
  // 默认当前显示第一页
  currentPage = 0;
  //   总数据集合(假设里面有内容)
  newsLists = [];

3，计算页数

//   页数(为零时取1)
    this.pageNum = Math.ceil(this.newsLists.length / this.pageSize) || 1;

4，根据页数赋值

    // 根据页数存数据
    for (let i = 0; i < this.pageNum; i++) {
      this.totalPage[i] = this.newsLists.slice(
        this.pageSize * i,
        this.pageSize * (i + 1)
      );
      console.log(this.totalPage[i]);
    }

点击事件

  // 上一页
  nextPage() {
  //加上条件，上一页到零 return
    if (this.currentPage === 0) return;
    this.dataShow = this.totalPage[--this.currentPage];
  }
  // 当前
  nowPage(index: any) {
  //根据获取的index进行赋值
    this.dataShow = this.totalPage[index];
  }

  // 下一页
  prePage() {
  //加上条件，下一页到最大索引值 return
    if (this.currentPage === this.pageNum - 1) return;
    this.dataShow = this.totalPage[++this.currentPage];
  }

灵感来自：https://blog.csdn.net/illusion_melody/article/details/82714793