2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）【删除用户】

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于删除用户，请多指教~

2、删除用户

2.1 弹窗询问是否确认删除

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

2.2 调用API完成用户的删除操作

		//根据id删除用户信息
        async removeUserById(id){
            //弹框询问用户是否删除数据
            const confirmResult =await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }
            ).catch(err => err)
            //如果用户确认删除，则返回值为字符串 confirm
            //如果用户取消删除，则返回值为字符串 cancel
            //console.log(confirmResult)
            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()
        }

3、结束语

至此，我们的功能就完成了！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

---

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退