vue+elementui前端rules校验缓存问题

在Vue中使用Element UI时，表单的rules验证可能会因为缓存问题而出现不正确的行为。这通常发生在使用Vue的v-if来控制表单的显示，而不是使用v-show。因为v-if会导致元素从DOM中移除，如果再次显示时没有重新渲染，可能会使用之前缓存的数据。

解决这个问题的一个策略是确保在每次显示表单时，重置表单数据和验证状态。可以通过以下步骤来实现：

1. 使用v-if来控制表单的显示。
2. 在表单的key属性上绑定一个唯一的值，当表单的显示状态改变时，改变这个key的值来强制Vue重新创建表单的实例。

示例代码：

<template>
  <el-form
    :model="form"
    :rules="rules"
    :key="formKey"
    ref="myForm"
  >
    <!-- form content -->
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        // form data
      },
      rules: {
        // form rules
      },
      formKey: 0,
    };
  },
  methods: {
    showForm() {
      this.formKey += 1; // 改变key值，强制重置表单
      this.$nextTick(() => {
        this.$refs.myForm.resetFields(); // 重置表单字段
      });
    },
    hideForm() {
      // 当表单隐藏时，不需要重置表单状态
    }
  }
};
</script>

在这个例子中，每当需要显示表单时，调用showForm方法，它会通过改变formKey的值来强制重建表单，并通过$nextTick来确保DOM已经更新完毕，再通过this.$refs.myForm.resetFields()来重置表单字段，这样可以清除之前的验证状态。