2020 zero base to quickly develop Vue family bucket develop the electricity business management system (Element-UI) [modify user]

Article Directory

1 Introduction
2, modify the user

2.1 modify the user's display dialog
2.2 user id information corresponding to the query and modify the user's rendering of form
2.3 modify the user form to achieve a reset operation
2.4 complete the form prior to the filing pre-verification and modification of user information to complete a form to submit changes

3. Conclusion
Click to enter Vue❤ learn column ~

1 Introduction

寒假是用来反超的！Vue put together to learn, this blog is about modifying user, please enlighten ~

2, modify the user

2.1 modify the user's display dialog

Binding on the Modify button a time, can be set to true Visable

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

Here Insert Picture Description

2.2 user id information corresponding to the query and modify the user's rendering of form

Here Insert Picture Description

2.3 modify the user form to achieve a reset operation

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

2.4 complete the form prior to the filing pre-verification and modification of user information to complete a form to submit changes

Here Insert Picture Description

		//修改用户的表单预验证
        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('更新用户信息用户成功!')
            })
        }

3. Conclusion

At this point, we modify the user function is complete!
Here Insert Picture Description

Vue family bucket develop the electricity business management system code cloud address, welcome to learn together ~

https://gitee.com/Chocolate666/vue_shop

Finally, after reading this blog, I feel quite helpful, can continue to view the contents of other columns wailing, Vue together to learn it ~
Here Insert Picture Description