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
  }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李庆政370

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值