增删改查：增加方法调用接口需要传入新增数据的参数
addUser () {
// 提交请求前，表单预验证
this.$refs.addUserFormRef.validate(async valid => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.post(‘users’, this.addUserForm)
if (res.meta.status !== 201) {
this.$message.error(‘添加用户失败！’)
}
this.$message.success(‘添加用户成功！’)
// 隐藏添加用户对话框
this.addDialogVisible = false
this.getUserList()
})
}
查询方法:需要传入id值
async showEditDialog (id) {
const { data: res } = await this.$http.get(‘users/’ + id)
if (res.meta.status !== 200) {
return this.$message.error(‘查询用户信息失败！’)
}
this.editUserForm = res.data
this.editDialogVisible = true
},
修改方法:需要传入id值
editUser () {
// 提交请求前，表单预验证
this.$refs.editUserFormRef.validate(async valid => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.put(
‘users/’ + this.editUserForm.id,
{
email: this.editUserForm.email,
mobile: this.editUserForm.mobile
}
)
if (res.meta.status !== 200) {
this.$message.error(‘更新用户信息失败！’)
}
// 隐藏添加用户对话框
this.editDialogVisible = false
this.$message.success(‘更新用户信息成功！’)
this.getUserList()
})
},
删除方法:需要传入要删除数据的id值 // 删除用户
async removeUserById (id) {
const confirmResult = await this.$confirm(
‘此操作将永久删除该用户, 是否继续?’,
‘提示’,
{
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
}
).catch(err => err)
// 点击确定 返回值为：confirm
// 点击取消 返回值为： cancel
if (confirmResult !== ‘confirm’) {
return this.$message.info(‘已取消删除’)
}
const { data: res } = await this.$http.delete(‘users/’ + id)
if (res.meta.status !== 200) return this.$message.error(‘删除用户失败！’)
this.$message.success(‘删除用户成功！’)
this.getUserList()
},
————————————————
版权声明：本文为CSDN博主「yalik_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45418844/article/details/119109850