解决vue2使用element-ui中表格组件,删除当前分页最后一条数据后,无法获得新数据的问题

正常开发过程中,假设我们向后端获取分页数据,传递的参数是:

<script>
 data() {
    return {
      page: {
        page: 1, // 当前页码
        size: 2,  //每一页显示的数据条数
        total: 0 // 数据总数
      }
    }
}
</script>

当删除当前分页(当前分页是最后一页)最后一条数据后,页码this.page.page并没有改变,但是数据在后端删除了,也就是说当前得到的数据是一个空列表,所以如果删除后如果要出现数据,我们再次需要手动更改this.page.page的值,代码如下:

      //执行删除操作
      ...
      //删除成功后执行如下代码

      // 修复删除后的bug
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page -= 1
      }
      //重新获取当前分页的数据
      ...

上述代码的意思是,执行删除操作,如果删除成功后,检测当前数组长度如果为1,并且当前页码大于1,则需要将页码减1,才能获得上一页的数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值