删除角色出现分页异常处理

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 211 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #开发语言

博客讨论了前端页面在删除最后一条数据后可能出现的显示问题，原因在于删除操作后未及时更新分页参数。解决方案是在删除时判断当前页数据长度，如果为1则请求第一页，否则将页数减1，确保数据加载正确。

问题如果删除最后一页的最后一条数据之后，页面会显示不正常

原因是删除指令发出去之后会执行一次数据的获取,这个时候获取的分页还是前一次的页数

        const res = await deleteRole(id)//删除的函数
        console.log(res)
        // 2. 重新请求
        this.fngetRoles()//该函数获取角色的时候pageParams: { page: 8, pagesize: 20 }

8页还是8页,但实际上后台已经没有第八页的数据了,

所以删除的时候可以先进行一个判断

 this.$message.success('删除成功')
        if (this.roles.length === 1) {
          this.pageParams.page--
          if (this.pageParams.page <= 0) {
            this.pageParams.page = 1
          }
        }

判断当前页面的数据长度this.roles.length,如果为1,则表示删除当前的数据之后,把请求的页数减去1

如果当前的页数为1,也就是总共就只有一条数据了, 则删除该数据后,还是请求第一页的数据