下面是对修改用户信息功能的整理，希望可以帮助到有需要的小伙伴~

修改用户信息按钮的样式

<!-- 修改按钮 -->
<!-- scope.row 获取到 改行  的所有数据 -->
<!-- scope.row.id 获取到 改行 的数据中的id -->
<el-button
  type="primary"
  icon="el-icon-edit"
  size="mini"
  @click="showEditDialog(scope.row.id)"
></el-button>

修改用户信息按钮的对话框

<!-- 修改用户的对话框 -->
    <!-- editDialogVisible 值 为 true 显示对话框 / false 隐藏对话框 -->
    <!-- editDialogClosed 监听对话框 -->

<el-dialog
  title="修改用户"
  :visible.sync="editDialogVisible"
  width="50%"
  @close="editDialogClosed"
>
  <el-form
    ref="editFormRef"
    :model="editForm"
    :rules="editFormRules"
    label-width="70px"
  >
    <el-form-item label="用户名" prop="username">
      <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>

修改用户信息所需的数据

<script>
export default {
	data() {
	  // 控制 修改用户对话框 的 显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息对象
      editForm: {}, 
	}	
	// 修改表单的验证规则
      editFormRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' },
        ],
      },
  },
  methods: {
  	// 监听修改用户对话框的关闭事件
    // editFormRef 修改用户表单 的 别名
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    // 修改用户信息并提交
    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.editDialogVisible = false
        // 刷新数据列表
        this.getUserList()
        // 提示修改成功
        this.$message.success('更新用户信息成功！')
      })
    }
  }
    
  
}
</script>

修改用户信息的方法

// 展示编辑用户的对话框
async showEditDialog(id) {
  // console.log(id)
  // this.editDialogVisible = true
  const { data: res } = await this.$http.get('users/' + id)
  if (res.meta.status !== 200) {
    return this.$message.error('查询用户失败')
  }
  // 把查询到的数据 保存到 editForm
  this.editForm = res.data
  // 显示修改用户的对话框
  this.editDialogVisible = true
},
// 监听修改用户对话框的关闭事件
// editFormRef 修改用户表单 的 别名
editDialogClosed() {
  this.$refs.editFormRef.resetFields()
},
// 修改用户信息并提交
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.editDialogVisible = false
    // 刷新数据列表
    this.getUserList()
    // 提示修改成功
    this.$message.success('更新用户信息成功！')
  })
}

接口

根据 ID 查询用户信息

• 请求路径：users/:id
• 请求方法：get
• 请求参数

参数名	参数说明	备注
id	用户 ID	不能为空携带在url中

• 响应参数

参数名	参数说明	备注
id	用户 ID
role_id	角色 ID
mobile	手机号
email	邮箱

• 响应数据

{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "00000",
        "email": "new@new.com"
    },
    "meta": {
        "msg": "查询成功",
        "status": 200
    }
}

编辑用户提交

• 请求路径：users/:id
• 请求方法：put
• 请求参数

参数名	参数说明	备注
id	用户 id	不能为空 参数是url参数:id
email	邮箱	可以为空
mobile	手机号	可以为空

• 响应参数

参数名	参数说明	备注
id	用户 ID
role_id	角色 ID
mobile	手机号
email	邮箱

• 响应数据

/* 200表示成功，500表示失败 */
{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "111",
        "email": "123@123.com"
    },
    "meta": {
        "msg": "更新成功",
        "status": 200
    }
}