實現效果

?

具體實現步驟：

1.準備一個對話框，并在其中加入自己想要的表單，當點擊修改按鈕時，啟用對話框

<!-- 修改用戶的對話框--> <el-dialogtitle="修改用戶":visible.sync="editDialogVisible"width="50%" @close="editDialogClosed"><el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" ><!-- disabled表示禁用狀態 --><el-form-item label="用戶名" prop="uername" ><el-input v-model="editForm.username" disabled></el-input></el-form-item><el-form-item label="郵箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item><el-form-item label="手機" prop="mobile"><el-input v-model="editForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editUserInfo">確 定</el-button></span> </el-dialog>

2.為修改按鈕添加點擊事件，并編輯事件

（1）為按鈕添加點擊事件

<!--修改按鈕--> <el-button size="small" type="primary" icon="el-icon-edit" round @click="showEditDialog(slotProps.row.id)"></el-button>

其中slotProps.row表示獲取修改按鈕說在這一行的所有數據。

slotProps.row.id即獲取已存在的用戶的ｉｄ，通過ｉｄ去進行用戶信息的查詢。

（2）編輯事件

// 展示編輯用戶的對話框 async showEditDialog(id) { // 發起請求獲取已存在的用戶信息const { data: res } = await this.$http.get('users/' + id)// 將獲取到的數據傳給editFormthis.editForm = res.data// 判斷是否獲取到了信息if (res.meta.status !== 200) {this.$message.error('查詢用戶信息失敗！')} // 查詢信息成功的話，打開對話框this.editDialogVisible = true },

（3）在ｄａｔａ的return中定義相關數據

// 控制修改用戶對話框的顯示 editDialogVisible: false, // 修改用戶的表單數據 editForm: {}, // 修改用戶表單的驗證規則對象 editFormRules: {email: [{required: true,message: '請輸入郵箱',trigger: 'blur'},{validator: checkEmail,trigger: 'blur'}],mobile: [{required: true,message: '請輸入手機號',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}]}

（4）在ｄａｔａ的最前面定義校驗規則

data(){//校驗郵箱的規則var checkEmail = (rule, value, callback) => {const reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!reg.test(value)){callback(new Error('請輸入有效的郵箱'));}callback();}// 驗證手機號的規則var checkMobile = (rule, value, callback) => {const reg=/^1[3456789]\d{9}$/;if(!reg.test(value)){callback(new Error('請輸入有效的手機號碼'));}callback();}

（5）為確認按鈕添加事件，進行表單的預校驗，關閉會話框，重新獲取列表，并提示修改數據成功。

<el-button type="primary" @click="editUserInfo">確 定</el-button> // 修改用戶信息并提交 editUserInfo(){this.$refs.editFormRef.validate( async vaild =>{if (!vaild) return// 將修改數據傳送到后端，并接收修改后的返回數據const {data:res}=await this.$http.put('users/'+this.editForm.id,{email:this.editForm.email,mobile: this.editForm.mobile})// 判斷是否修改成功if (res.meta.status !== 200) {return this.$message.error('更改用戶信息失敗！')}//關閉會話框this.editDialogVisible = false//重新獲取列表this.getUserList()//提示修改成功this.$message.success('修改數據成功')}) }

（6）為表單設置關閉時，移除表單項的校驗結果。

<el-dialogtitle="修改用戶":visible.sync="editDialogVisible"width="50%" @close="editDialogClosed"> // 監聽修改用戶對話框的關閉 editDialogClosed(){ this.$refs.editFormRef.resetFields() },

總結

以上是生活随笔為你收集整理的ｖｕｅ实现修改用户信息的全过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。