重置element ui 的dialog的表单验证

今天测试给我提了一个Bug,就是使用element ui 的dislog弹框做表单验证时，当我点击取消或者弹框的close图形时，我的表单验证的红色警告没有消失，再次点击弹框的时候，红色警告还是会出现，如下图

后来上网百度解决了这个问题

        <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();
    },

写完的我发现，只要写一个closeDialog()的函数就可以了，不用再给取消按钮添加事假