【vue-el-table】删除功能-处理页码边界问题

删除功能-处理页码边界问题

页码边界问题

思路:是页数在只剩一条数据的情况下删除此条数据,此页为空,我们要修改这个问题让它显示为上一页,在删除的时候对这一页的数据进行判断,如果数据长度为1即为删除最后一条数据,我们就在走渲染页面时让页码-1,就会在删除最后一条数据时渲染上一组数据

完整代码:

 handleDelete(row) {
    
    
 //由于我修改和删除用的同一个页面,这里只是拿来修改标识
      this.isEdit = false
// 确认框
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
    
    
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
    
    
        //删除接口
          delUser(row.id)
        //处理页码边界问题
          if (this.form.length === 1) {
    
    
            this.page--
            if (this.page <= 0) {
    
    
              this.page = 1
            }
          }
          //调用重新渲染函数
          this.renderSettingList()
          this.$message({
    
    
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
    
    
          this.$message({
    
    
            type: 'info',
            message: '已取消删除'
          })
        })
    },

猜你喜欢

转载自blog.csdn.net/qq_40797578/article/details/128501904