el-form表单需要注意的问题（表单刷新，规则的设定，非空提交）

我们完成表单提交的时候会需要遇到问题

表单提交之后数据没有刷新，依旧保留着上一次提交的数据

你第一次点击新增填完数据，或者是点击修改数据之后，再一次打开这个dialog的时候会发现携带上次的数据，这其实是在el-form组件上面定义过这个功能，就是this.$refs['dataForm'].resetFields()中的resetFields方法来完成的，这个方法能够使用是有一个前提的，那就是每一个form表单中的数据必须要有制定的规则，

表单提交的规则

也就是

<el-form label-width="180px" ref="dataForm" :rules="dataRule" :model="dataForm">

中的:rules="dataRule"，具体要完成规则就是在data（）return{}中的return里面，

dataRule: {
					taskId: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					...
					}
					

具体规则会出现在表单中的prop属性中

<el-form-item label="任务名称:" prop="taskId" >
		<el-select v-model="dataForm.taskId" filterable style="width: 100%;" :clearable="true" placeholder="请选择" >
				<el-option v-for="p in ProductionPlanList" :label="p.code" :value="p.id"></el-option>
		</el-select>
</el-form-item>

然后我们可以自定义一些属性，大部分是非空，还有就是需要区完成数字的填写还是不能填写数字，都可以在这里进行规定，然后通过prop进行设定

非空提交

然后在提交的方法里面

async dataFormSubmit(num) {
				let valid = await this.$refs.dataForm.validate().catch(() => {
				  return util.$message.showInfo2('校验错误')
				})
				if (!valid) return
				let data = {
					taskType:num,
					id: this.dataForm.id,
					taskId: this.dataForm.taskId,
					...
				};

				this.$axios.post('/pc/modeldefecrectificationnotice/save', data).then(res => {

					this.dialogFormVisible = false;
					this.$emit('refreshDataList')

				}).catch((error) => {})
			},

其中let valid = await this.$refs.dataForm.validate().catch(() => { return util.$message.showInfo2('校验错误') }) if (!valid) return这些代码就是完成了表单的非空提交，但是写完上面的代码之后还需要在方法头添加async修饰符否则会报错。