el-table结合pagination删除最后一条数据后显示无数据问题

问题描述:

当我删除第二页的最后一个数据或直接将第二页数据全部批量删除后,自动跳转至了第一页,此时第一页应该有数据,但界面上却显示暂无数据。

如下图所示:


原因分析:

element-ui的分页组件在你删除最后一页数据的时候currentPage没有改变还是最后一页,但此时最后一页已经没有数据了,所以即便删除之后重新调用后端接口加载数据也显示暂无数据,需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据。


解决方案:

在删除了数据之后判断一下currentPage与删除之后的总页数大小,如果currentPage小于删除之后的总页数,则将删除之后的总页数赋值给currentPage,否则不处理。封装了一个dleChangePage方法用来校验,详细代码如下:

  doDelete(data) {
     const ids = [] //要删除的数据集合
     data.forEach(val => {
        ids.push(val.id)
      })
      crud.dleChangePage(ids.length) 
      crud.refresh() //重载数据
  },
  dleChangePage(size) {//size:要删除的数据数量
      //此时已经实现删除操作,所以total的值需要减size,Math.ceil是向上取整,保证始终大于等于0
      const totalPage = Math.ceil((crud.page.total - size) / crud.page.size)

      //将当前页码与删除数据之后的总页数进行比较,避免当前页码不存在
      const pagenum = crud.page.page > totalPage ? totalPage : crud.page.page

      //避免pagenum变为0
      crud.page.page = pagenum < 1 ? 1 : pagenum
  }

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页