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❤學習專欄~

學如逆水行舟，不進則退