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

一、引言

寒假是用来反超的！一块儿来学习Vue把，这篇博客是关于修改用户，请多指教~javascript

二、修改用户

2.1 展现修改用户的对话框

在修改按钮上绑定一个时间，设置Visable为true便可html

//展现修改用户的对话框
        showEditDialog(){
            this.editDialogVisible = true
        }

2.2 根据id查询对应的用户信息并渲染修改用户的表单

2.3 实现修改用户表单的重置操做

//监听修改用户对话框的关闭事件
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        }

2.4 完成提交修改以前的表单预验证和提交表单完成用户信息的修改

//修改用户的表单预验证
        editUserInfo(){
            this.$refs.editFormRef.validate( async valid=>{
                //console.log(valid)
                if(!valid) return
                //能够发起修改用户的请求
                const {data:res} = await this.$http.put('users/' + this.editForm.id,{
                    email: this.editForm.email , mobile: this.editForm.mobile
                })
                //console.log(res)
                if(res.meta.status !== 200) return this.$message.error('更新用户信息失败!')
                
                //隐藏添加用户的对话框
                this.editDialogVisible = false
                //刷新数据列表
                this.getUserList()
                //提示修改为功
                this.$message.success('更新用户信息用户成功!')
            })
        }

三、结束语

至此，咱们的修改用户功能就完成了！
vue

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

https://gitee.com/Chocolate666/vue_shopgit

最后，看完本篇博客后，以为挺有帮助的话，能够继续查看专栏其它内容嗷，一块儿来学习Vue吧~
web

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退