vue 多表单提交

<template>	
	<div>
	<div>
	 <el-form ref="userForm" :model="userInfo">
		 <el-row>
		   <el-col :span="12">
			<el-form-item label="人员姓名:">
			    <el-input v-model="userInfo.userName">
				</el-input>
		    </el-form-item>
		   </el-col>
		   <el-col :span="12">
			<el-form-item label="性别:">
			    <el-input v-model="userInfo.sex">
				</el-input>
		    </el-form-item>
		   </el-col>
		 </el-row>
		 <el-row>
		   <el-col :span="12">
			<el-form-item label="年龄:">
			    <el-input v-model="userInfo.age">
				</el-input>
		    </el-form-item>
		   </el-col>
		   <el-col :span="12">
			<el-form-item label="联系电话:">
			    <el-input v-model="userInfo.tel">
				</el-input>
		    </el-form-item>
		   </el-col>
		 </el-row>
		 <el-row>
		   <el-col :span="12">
			<el-form-item label="地址:">
			    <el-input v-model="userInfo.address">
				</el-input>
		    </el-form-item>
		   </el-col>
		   <el-col :span="12">
			<el-form-item label="所属部门:">
			    <el-input v-model="userInfo.department">
				</el-input>
		    </el-form-item>
		   </el-col>
		 </el-row>	  
	 </el-form>
	</div>
	<div>
	 <el-form ref="deptForm" :model="deptInfo">
		 <el-row>
		   <el-col :span="12">
			<el-form-item label="部门编码:">
			    <el-input v-model="deptInfo.deptCode">
				</el-input>
		    </el-form-item>
		   </el-col>
		   <el-col :span="12">
			<el-form-item label="部门名称:">
			    <el-input v-model="deptInfo.deptName">
				</el-input>
		    </el-form-item>
		   </el-col>
		 </el-row>		  
	 </el-form>
	</div>
	<div class="edit_btn el-fomr position_btn">
		<el-button type="primary" class="btn_close" @click="cancel">取消</el-button>
		<el-button type="primary" :loading="btnLoading" @click="save">保存</el-button>
	</div>
	</div>
</template>
<script>
export default {
  data() {
    return {
      reload: true,
      tabIndex: "0",
      contentStyleObj: {
        height: "670px",
      },
      userInfo: {
        userName:"李云吉",
        sex:"男",
        age:20,
		tel:"13775175890",
		address:"",
		department:""
      },
	  deptInfo: {
        deptName:"研发部",
        deptCode:"001"
      },
	  btnLoading: false
    };
  },
  mounted() {
  },
  methods: {
    cancel() {
      window.parent._closeDialog({
        success: "关闭",
      });
    },
    save() {
      this.btnLoading = true;
      let userForm=new Promise((resolve,reject)=>{
        this.$refs["userForm"].validate((valid)=>{
          if(valid){
            resolve();
          }
          else{
		    this.btnLoading = false;
            return false;
          }

        });
      });
      let deptForm=new Promise((resolve,reject)=>{
        this.$refs["deptForm"].validate((valid)=>{
          if(valid){
            resolve();
          }
          else{
		    this.btnLoading = false;
            return false;
          }
        });
      });
      Promise.all([userForm,deptForm]).then(()=>{
       //TODO:需要处理的业务
      });
    },
  }
};
</script>

注：关键代码 Promise