在开发中,删除需要注意的常见问题及详解,尤其是对分页数据的删除

1.在开发中,最常见的就是根据id删除某条数据。首先根据接口文档,在api/employee.js中封装根据id删除用户的接口

/**
 * 根据id删除员工
 * @param {*} id
 * @returns
 */
export function deleteEmployee(id) {
  return request({
    url: `/sys/user/${id}`,
    method: 'DELETE'
  })
}

2.当用户点击删除的时候,我们要用到作用域插槽,通过row.id,得到用户所点击对象的id。

<template v-slot="{row}">
    <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
</template>

3.在methods中定义该删除操作的方法。由于删除操作是敏感操作,所以我们需要提醒用户是否确认。在这里所用的提示是element-ui中的提示,它是promise对象,所以可以用 async 和 await 来简化,如果用户点击了确认,返回的是 confirm ,如果点击了取消,返回的是 cancel 。另外需要用 catch 捕获异常,否则有时候会报一些警示错误提示(控制台)。如果删除的数据有分页效果的话,此段代码中最后一个 if 的处理至关重要。如果删除的是当前某一页的最后一条数据,假设别的页还有数据,还是会显示没有数据,所以当删除完数据后,在重新渲染列表之前,需要进行判断,如果删除的数据是当前页的最后一条,且当前页不是第一页,则让页数减一,重新获取上一页数据。

// 删除员工
    async delEmployee(id) {
      // console.log(id)
      // promise对象
      const result = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        type: 'warning'
      }).catch(e => e)
      // console.log(result)
      if (result !== 'confirm') return
      const res = await deleteEmployee(id).catch(e => this.$message.error(e.message))
      this.$message.success(res.message)
      // 解决删除的bug 当删除的数据是某一页的最后一条数据的时候,需要判断页数是否大于1,如果不是第一页,那么就让页数减一
      if (this.employeeList.length === 1 && this.pageParams.page > 1) {
        this.pageParams.page--
      }
      // 重新获取数据
      this.loadEmployees()
    }

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值