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修饰符否则会报错。