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

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()
    }