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

文章目录

1、引言
2、删除用户

2.1 弹窗询问是否确认删除
2.2 调用API完成用户的删除操作

3、结束语
点击进入Vue❤学习专栏~

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