vue实现删除用户的操作

1.为删除按钮添加点击事件，并编辑事件

<el-button size="small" type="danger" icon="el-icon-delete" round @click="removeUserById(slotProps.row.id)"  ></el-button>

// 删除用户
async removeUserById(id){
  // 弹框询问是否删除用户
  const confirmResult =await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(err => err)
  console.log(confirmResult)
  // 如果用户取消了删除，则返回字符串 cancel
  // 如果用户确认删除，则返回字符串 confirm
  if (confirmResult != 'confirm'){
    return this.$message.info('已取消删除')
  }

  const {data:res} =await this.$http.delete('users/'+id)
  console.log(res)
  if (res.meta.status !== 200){
    return this.$message.error('删除用户失败！')
  }
  this.$message.success('删除用户成功')
  // 刷新列表
  this.getUserList()
}

2.引入消息弹框组件

import { MessageBox } from 'element-ui'

// 在Vue原型对象上挂载消息弹框组件，每个vue组件都可以通过this访问到
Vue.prototype.$confirm = MessageBox.confirm