当我们清除校验时一般在关闭弹框的时候会使用
this.$refs[formData].resetFields();
<el-dialog title="新增xx公司" :visible.sync="addCompanyVisible" width="30%" :modal-append-to-body='false' class="urgecompany-dialog" @close="closeDialog" >
<el-form class="addCom" :model="addCompany" :rules="addCompanyRules" ref="addCompany" >
<el-form-item prop="name">
<el-input v-model="addCompany.name" placeholder="请输入公司名称" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelAddCompanyVisible('addCompany')"> 取消 </el-button>
<el-button type="primary" @click="addSubmit" > 保存 </el-button>
</div>
</el-dialog>
注意取消按钮和close图形关闭按钮是两个事件
取消按钮的事件cancelAddCompanyVisible(‘addCompany’)中的addCompany是你在form表单中绑定的值
close图形关闭按钮就一个简单的事件closeDialog
下面是两个事件函数
resetFields()方法是element ui自带的重置表单验证的函数
cancelAddCompanyVisible(addCompany) {
this.addCompanyVisible = false;
this.addCompany.name = "";
this.$refs[addCompany].resetFields();
},
closeDialog(){
this.$refs['addCompany'].resetFields();
},
适用于单个弹框的点击关闭打开就会有效果,但如果表格多个按钮多次触发同一个弹框时,效果不太显著,这时候就可以给el-form加v-if
<el-dialog
title="学籍异动"
:visible.sync="studyVisible"
width="50%"
height="auto"
style="text-align: left"
>
<el-form
v-if="studyVisible"
ref="stutyForm"
:model="stutyForm"
label-width="100px"
style="margin-top: 20px"
>
<el-form-item label="学生姓名">
<span>{{ stutyForm.studentName }}</span>
</el-form-item>
<el-form-item
label="异动类型"
prop="changeType"
:rules="[
{ required: true, message: '请输入异动类型', trigger: 'change' },
]"
>
<el-select v-model="stutyForm.changeType" placeholder="请选择">
<el-option
v-for="item in studyList"
:key="item.dictValue"
:label="item.dictValue"
:value="item.dictKey"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
prop="remark"
label="原因"
:rules="[{ required: true, message: '请输入原因', trigger: 'blur' }]"
>
<el-input
v-model="stutyForm.remark"
type="textarea"
style="width: 100%"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="onSubmitStudy('stutyForm')"
size="small"
>确定</el-button
>
<el-button @click="studyVisible = false" size="small">取消</el-button>
</span>
</el-dialog>
将el-dialog的显示与el-form的v-if保持一致,这样每次打开弹框它都会生成一个新的表单,当第一个打开的表单校验出错时也不会影响到下一个弹框