Vue + element UI 表单弹框，自动校验问题

问题原因

上次关闭弹窗时没有初始化表单，清空表单验证。

解决方法

关闭弹框时 resetFields

代码示例

<el-dialog :title="title" :visible.sync="dialogVisible" append-to-body>
    <el-form
      ref="editFormRef"
      :model="form"
      :label-width="labelWidth"
      :hide-required-asterisk="true"
      @submit.native.prevent
    >
      <el-form-item :label="editLabel" :rules="rules" prop="name">
        <el-input
          ref="nameRef"
          v-model="form.name"
          :placeholder="$t('pleaseEnter')"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <div style="text-align:center">
          <el-button @click="cancel" size="small">{{ $t('cancel') }}</el-button>
          <el-button
            type="primary"
            @click="submit"
            native-type="submit"
            size="small"
          >
            {{ $t('edit') }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>

在关闭弹框的方法或者监听弹框的方法里加上下面这句。初始化表单

if (this.$refs.editFormRef) {
    this.$refs.editFormRef.resetFields();
}