1、展示修改用戶的對(duì)話框

給修改按鈕添加點(diǎn)擊事件：

<!--修改-->
<el-button type="primary" size="mini" icon="el-icon-edit"
              @click="showEditDialog()"></el-button>

添加修改對(duì)話框代碼：

<!--修改用戶信息的對(duì)話框-->
<el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%" >
      <span>這是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">確 定</el-button>
      </span>
</el-dialog>

<script>
export default {
  data() {
     return {
        editDialogVisible: false // 控制修改用戶信息對(duì)話框是否顯示
     }
  },
  methods: {
     // 監(jiān)聽 修改用戶狀態(tài)
    showEditDialog() {
      this.editDialogVisible = true
    }
  }
}
</script>

此時(shí)，點(diǎn)擊修改按鈕已經(jīng)可以彈出對(duì)話框了。

2、顯示對(duì)應(yīng)的用戶信息

通過作用域插槽獲取row信息

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

新建editForm：

<script>
export default {
  data() {
     return {
        // 修改用戶信息的表單數(shù)據(jù)
        editForm: {
          username: '',
          email: '',
          mobile: ''
        }
     }
  },
  methods: {
     // 監(jiān)聽 修改用戶狀態(tài)
    showEditDialog(userinfo) {
      this.editDialogVisible = true
      console.log(userinfo)
      this.editForm = userinfo
    }
  }
}
</script>

也可以通過ID查詢對(duì)應(yīng)的用戶信息：

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

// 監(jiān)聽 修改用戶狀態(tài)
async showEditDialog(id) {
     this.editDialogVisible = true
     // console.log(id)
     const { data: res } = await this.$http.get('users/' + id)
     if (res.meta.status !== 200) {
        return this.$message.error('查詢用戶信息失敗')
     }
     this.editForm = res.data
}

3、渲染修改用戶信息的表單

用戶名為禁止修改狀態(tài)

<!--內(nèi)容主體區(qū)域-->
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
       <el-form-item label="用戶名">
          <el-input v-model="editForm.username" :disabled="true"></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="手機(jī)" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
       </el-form-item>
</el-form>

修改用戶信息表單的驗(yàn)證規(guī)則：

// 修改用戶信息表單的驗(yàn)證規(guī)則對(duì)象
editFormRules: {
      email: [
          { required: true, message: '請(qǐng)輸入用戶郵箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
      ],
      mobile: [
          { required: true, message: '請(qǐng)輸入用戶手機(jī)', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
      ]
}

editForm：是數(shù)據(jù)綁定對(duì)象，editFormRef：是引用名稱，editFormRules：是驗(yàn)證規(guī)則，label-width：是表單域標(biāo)簽的寬度

驗(yàn)證規(guī)則的required：表示是否必填，message：表示提示信息，trigger：表示觸發(fā)時(shí)機(jī)（blur失去焦點(diǎn)）

點(diǎn)擊修改按鈕，實(shí)現(xiàn)效果如圖：

4、實(shí)現(xiàn)修改用戶信息表單的重置功能

添加close事件：

<!--修改用戶信息的對(duì)話框-->
<el-dialog title="修改用戶信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">

添加editDialogClosed事件：

// 監(jiān)聽 修改用戶信息對(duì)話框的關(guān)閉事件
editDialogClosed() {
    // 表單內(nèi)容重置為空
    this.$refs.editFormRef.resetFields() // 通過ref引用調(diào)用resetFields方法
}

5、完成提交修改前的表單預(yù)校驗(yàn)

給確定按鈕綁定點(diǎn)擊事件：

<el-button type="primary" @click="editUserInfo">確 定</el-button>

// 點(diǎn)擊按鈕 修改用戶信息
editUserInfo() {
     this.$refs.editFormRef.validate(valid => {
        // console.log(valid)
        if (!valid) return
        // 可以發(fā)起修改用戶信息的網(wǎng)絡(luò)請(qǐng)求
        this.editDialogVisible = false
     })
 }

6、提交表單完成用戶信息的修改

繼續(xù)添加代碼：

// 點(diǎn)擊按鈕 修改用戶信息
editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // 可以發(fā)起修改用戶信息的網(wǎng)絡(luò)請(qǐng)求
        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.$message.success('修改用戶信息成功！')
        // 關(guān)閉對(duì)話框
        this.editDialogVisible = false
        // 重新發(fā)起請(qǐng)求用戶列表
        this.getUserList()
      })
}

OK，完成

總結(jié)

以上是生活随笔為你收集整理的Vue + ElementUI的电商管理系统实例05 修改用户的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。