vue+iview 表单验证不成功会关闭弹窗 解决方案

问题来源
一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下

表单

<Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')" :loading="loading" :mask-closable="false" width="900px" okText="提交" :styles="{top:'65px'}">
	<Form ref="employeeEntryInformationForm" :model="employeeEntryInformationForm" :label-width="120" :rules="ruleValidate">
		 <!-- 员工 -->
         <FormItem label="员工" prop="employeeId">
             <Select v-model="employeeEntryInformationForm.employeeId" filterable :transfer="true" placeholder="">
                 <Option :value="item.id" v-for="item in employeeList" :key="item.id">{{item.name}}</Option>
             </Select>
         </FormItem>
	</Form>
</Modal>

初始化参数
注意⚠️：loading初始化时为 true

data() {
  return {
       employeeEntryInformationModel: false,
       loading: true,
       employeeList:[],
       employeeEntryInformationForm: {
           employeeId:null
       },
       ruleValidate: {
           employeeId: [
               {required: true, message: '请选择员工', trigger: 'change', type: 'number'}
           ]
       }
   }
}

//全文关键语句
setTimeout(() => {
this.loading = true
}, 0)

submit: function (name) {
	this.$refs[name].validate(valid => {
		if (valid) {
			let employeeEntryManagementDTO = {
				"employeeId": this.employeeEntryInformationForm.employeeId
			};
			this.$api.employeeEntryManagement.update(employeeEntryManagementDTO)
			.then(res => {
				setTimeout(() => {
					this.$refs[name].resetFields();
					this.loading = false;
					this.$nextTick(() => {
						this.loading = true;
					});
					this.$Message.success('录入成功');
					this.employeeEntryInformationModel = false;
				}, 1000);
			})
		} else {
			this.loading = false;
			//全文关键语句
			setTimeout(() => {
				this.loading = true
			}, 0)
			this.$Message.error('录入失败');
			}
	});
}