element-ui分页功能细节

2021-04-17 1,224 阅读1分钟

问题一：分页最后一页的数据删光以后要自动跳转到倒数第二页

注意细节：

跳转以后请求数据刷新视图， pagenum要先改变再发起请求，不然请求的是原本最后一页的数据，为空 .

如果最后一页的数据没有删光，页数不能自动跳转（见过其他人文章有此bug，因此写上这一点）

思路：先计算总页数，然后判断应该处于的当前页数，再给pagenum重新赋值，最后发起请求刷新视图

 // 判断是否删除的是最后一页的最后一条数据
    isDelLastPage () {
      // 先计算总页数 因为this.total需要再请求列表数据后才能同步删除后的最新数据，故需要手动 -1
      const totalPage = Math.ceil((this.total - 1) / this.params.pagesize)
      // 判断应该处于的当前页数
      const currentPage = this.params.pagenum > totalPage ? totalPage : this.params.pagenum
      this.params.pagenum = currentPage < 1 ? 1 : currentPage
    }

问题二：防止刷新以后分页的当前页码和每页条数被重置，回到第一页

思路：
1. 点击更改页码或者容量时，回掉函数内部把当前的pagesize和pagenum同步到sessionStorage中 
2. created生命周期里重新获取并赋值给初始值 ， 再请求列表数据

created() {
    if (window.sessionStorage.getItem("currentPage")) {
    // 转换成Number类型
      this.params.pagenum = parseInt(
        window.sessionStorage.getItem("currentPage")
      );
    }
    if (window.sessionStorage.getItem("currentPageSize")) {
      this.params.pagesize = parseInt(
        window.sessionStorage.getItem("currentPageSize")
      );
    }
    this.getUsers();
  }