elementUi重置表单清除校验resetFields()不起作用

当我们清除校验时一般在关闭弹框的时候会使用

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')">&nbsp;&nbsp;&nbsp;取消&nbsp;&nbsp;&nbsp;</el-button>
                <el-button type="primary" @click="addSubmit" >&nbsp;&nbsp;&nbsp;保存&nbsp;&nbsp;&nbsp;</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保持一致，这样每次打开弹框它都会生成一个新的表单，当第一个打开的表单校验出错时也不会影响到下一个弹框