项目第四天编辑用户功能

1.添加编辑用户的对话框（在element组件中对话框的自定义内容里）
1.1组件中的:visible.sync="editdialogFormVisible"里的值先设置不显示

//写在return中
editdialogFormVisible=flase

1.2在编辑按钮中绑定事件

@click='edithandle'

1.3给相应的输入框添加双向数据绑定

v-model="editform.username"

1.4在return中定义一个对象

editform: {
        username: '',
        email: '',
        mobile: ''
      }

1.5在JS函数中添加edithandle函数方法

edithandle(){
this.editdialogFormVisible=true
}

1.6输入框的禁用

disabled    //直接添加一个在输入框即可

1.7每个输入框里的数据和弹出来的对话框数据的同步（表格中的自定义模板）

//写在点击那里
@click="edithandle(scope.row)

在js的编辑方法里记得传参row，和执行下面的代码

     this.editform.username = row.username
      this.editform.email = row.email
      this.editform.mobile = row.mobile
      this.editform.id = row.id

注意点：editform要跟:model="editForm"里的一样

2.编辑用户的请求接口封装

export const editUserInfo = obj => axios.put(`users/${obj.id}`, obj).then(res => res.data)

---

3.定义一个提交编辑用户信息的函数，和在提交按钮中添加相应的监听，

//记得传参formName用来校验，在form表单中的表单认证
submitEdit(formName){
this.$refs[formName].validate((valid) => {
          if (valid) {
            发送请求的方法写进来
          }else {
          this.$message.warning('字段校验不通过，请重新填写')
        }
}