解决el-form-item一开始会有校验的问题

当你在Vue.js中使用Element UI库的`el-form-item`组件进行表单验证时，可能会遇到这样一个问题：当表单首次加载时（比如从API获取数据填充表单），由于数据还没有完全填充，一些依赖于默认值或用户输入的验证规则可能会触发错误提示。这通常被称为“初始状态验证”。

为了解决这个问题，你可以采用以下策略：

1. **v-model.lazy**: 使用`v-model.lazy`可以延迟计算值直到真正赋值之后。例如：

   <el-form-item label="字段名" :rules="{'required': true}" v-model.lazy="formValue">
     <!-- 表单元素 -->
   </el-form-item>

2. **设置默认值时忽略验证**：在初始化表单数据时，对不需要立即验证的项暂设为空值或`null`，然后在`data`函数中添加一个生命周期钩子如`created`或`mounted`，在这个时间点再进行完整的数据绑定并启用验证。

   data() {
     return {
       formData: { /* 初始化为部分或空数据 */ },
       formRules: { /* 验证规则 */ }
     };
   },
   created() {
     this.formValue = this.formData.fieldName; // 这里设置值同时开启验证
   },
   mounted() {
     // 其他可能需要的处理...
   }

3. **条件渲染或使用自定义验证策略**：如果你不想使用懒加载，也可以在渲染验证元素之前检查是否有值可用。例如，通过 `v-if` 或 `v-show` 来控制。

<template>
  <el-form-item :rules="fieldRules" v-if="hasInitialValue">
    <!-- 表单元素 -->
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      formValue: '',
      fieldRules: {
        required: true,
        ... /* 其他验证规则 */
      },
      hasInitialValue: false,
    };
  },
  computed: {
    fieldRules() {
      return this.formValue ? this.$options.rules : {}; // 空字符串也算有值
    },
  },
  watch: {
    formValue(val) {
      if (val) {
        this.hasInitialValue = true;
      } else {
        this.hasInitialValue = false;
      }
    },
  },
};
</script>