Vue + ElementUI的電商管理系統實例05 修改用戶

1、展示修改用戶的對話框

給修改按鈕添加點擊事件：

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

添加修改對話框代碼：

<!--修改用戶信息的對話框-->
<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 // 控制修改用戶信息對話框是否顯示
     }
  },
  methods: {
     // 監聽 修改用戶狀態
    showEditDialog() {
      this.editDialogVisible = true
    }
  }
}
</script>

此時，點擊修改按鈕已經可以彈出對話框了。

2、顯示對應的用戶信息

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

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

新建editForm：

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

也可以通過ID查詢對應的用戶信息：

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

// 監聽 修改用戶狀態
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、渲染修改用戶信息的表單

用戶名為禁止修改狀態

<!--內容主體區域-->
<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="手機" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
       </el-form-item>
</el-form>

修改用戶信息表單的驗證規則：

// 修改用戶信息表單的驗證規則對象
editFormRules: {
      email: [
          { required: true, message: '請輸入用戶郵箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
      ],
      mobile: [
          { required: true, message: '請輸入用戶手機', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
      ]
}

editForm：是數據綁定對象，editFormRef：是引用名稱，editFormRules：是驗證規則，label-width：是表單域標簽的寬度

驗證規則的required：表示是否必填，message：表示提示信息，trigger：表示觸發時機（blur失去焦點）

點擊修改按鈕，實現效果如圖：

4、實現修改用戶信息表單的重置功能

添加close事件：

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

添加editDialogClosed事件：

// 監聽 修改用戶信息對話框的關閉事件
editDialogClosed() {
    // 表單內容重置為空
    this.$refs.editFormRef.resetFields() // 通過ref引用調用resetFields方法
}

5、完成提交修改前的表單預校驗

給確定按鈕綁定點擊事件：

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

// 點擊按鈕 修改用戶信息
editUserInfo() {
     this.$refs.editFormRef.validate(valid => {
        // console.log(valid)
        if (!valid) return
        // 可以發起修改用戶信息的網絡請求
        this.editDialogVisible = false
     })
 }

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

繼續添加代碼：

// 點擊按鈕 修改用戶信息
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 }
        )
        if (res.meta.status !== 200) {
          return this.$message.error('修改用戶信息失敗！')
        }
        this.$message.success('修改用戶信息成功！')
        // 關閉對話框
        this.editDialogVisible = false
        // 重新發起請求用戶列表
        this.getUserList()
      })
}

OK，完成