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

问题来源
一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 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('录入失败');
			}
	});
}

你可能感兴趣的:(iview,vue)