v-if 导致 elementui 表单校验失效问题解决

报错问题解释：

在Vue中使用v-if来控制元素的显示与隐藏时，如果元素包含了Element UI表单内的输入组件，比如el-input，在v-if条件为假时，该元素及其子元素可能从DOM中移除。Element UI表单的验证是依赖于实际的DOM结构来工作的，一旦元素被移除，验证逻辑就会失效。

解决方法：

1. 使用v-show代替v-if。v-show会通过CSS控制元素的显示与隐藏，而不是真正地移除DOM元素。
2. 如果必须使用v-if，可以在v-if的外层包裹一个不会被移除的容器元素，并且在这个容器上使用v-if。
3. 监听v-if条件的变化，在条件变为真时，手动触发Element UI表单的重新验证。

示例代码：

<template>
  <div>
    <!-- 使用v-show替代v-if，保持元素始终存在于DOM中 -->
    <el-form ref="form" :model="form" v-show="isShowForm">
      <el-form-item prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isShowForm: true, // 控制表单的显示与隐藏
      form: {
        username: '',
        // 其他表单数据
      }
    };
  },
  watch: {
    // 监听isShowForm的变化，在显示表单时触发验证
    isShowForm(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.form.validate();
        });
      }
    }
  }
};
</script>

在这个例子中，我们使用v-show来确保表单元素始终存在于DOM中，并且通过监听isShowForm的变化，在v-if条件变为真时，手动触发表单验证。