vue对整体表单数据预校验并提交到后台实现增加用户

1.为确认提交按钮添加点击事件

<el-button type="primary" @click="addUser">确 定</el-button>

2.编辑事件

//点击按钮，添加用户
addUser(){
 // 进行表单的预校验,vaild为boolean值
  this.$refs.addFormRef.validate( async valid =>{
    // 校验失败，不走添加的逻辑
    if (!valid) return;
    //校验成功，向后端发起请求
    const {data: res} = await this.$http.post("users",this.addForm)
    if (res.meta.status !== 201) {
      this.$message.error('添加用户失败！')
    }
    this.$message.success('添加用户成功！')
    // 隐藏添加用户的对话框
    this .addDialogVisible =false
    // 重新获取用户列表
    this.getUserList()
  })
}