清除Form表单校验信息

Vue ElementUI form表单提交如果有规则校验，关闭弹框再次打开，校验信息还存在。

这个时候可以通过this.$refs.form.clearValidate();清除校验状态。

这里的form要在el-form里设置，示例如下：

<el-form
    ref="form"
>
</el-form>

关闭弹框清除填写的信息

核心代码：this.$refs.form.resetFields();。

:model的form要在data里设置

data() {
    form: {
        status: null,
    },
}

一定要注意这里的:model="form", el-form-item 里的prop,表单元素里的v-model都要设置对应的属性和form才能确保正确清除。

<el-form
    ref="form"
    label-width="150px"
    :model="form"
>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择状态"
        >
          <el-option
            v-for="(value, key) in shopRewardStatusMap"
            :key="key"
            :label="value"
            :value="key"
          />
        </el-select>
      </el-form-item>
  </el-form>

确保上面的设置没问题，用 this.$refs.form.resetFields(); 即可清除form里的内容。