表单切换导致校验失效？element ui一套搞定！

好的，以下是关于“element ui 表单使用v-if切换导致校验规则失效的解决方案”一文的创作：

element ui 表单使用v-if切换导致校验规则失效的解决方案

在使用element ui开发表单时，我们经常会遇到需要根据某些条件显示或隐藏某些表单项的情况。这时，我们会使用v-if指令来实现。然而，当我们使用v-if指令切换表单项时，可能会导致校验规则失效。

解决方案

方案一： 给每个item加一个key作为区分

因为form-item绑定验证事件是在mounted中进行的，规则变化后没有进行重新绑定验证事件，v-if切换时，元素销毁后，重新创建，mounted又会执行一遍，但规则没有变化，所以无法重新绑定验证事件。

<el-form-item v-for="(item, index) in form" :key="index">
  <el-input v-model="item.value" :rules="item.rules"></el-input>
</el-form-item>

方案二： 使用v-show指令代替v-if指令

v-show指令和v-if指令的区别在于，v-show指令只是控制元素的显示和隐藏，而v-if指令则会销毁和重新创建元素。因此，使用v-show指令可以避免校验规则失效的问题。

<el-form-item v-for="(item, index) in form" :key="index">
  <el-input v-show="item.show" v-model="item.value" :rules="item.rules"></el-input>
</el-form-item>

方案三： 在v-if指令中使用keep-alive组件

keep-alive组件可以使被包裹的组件在切换时不被销毁，从而避免校验规则失效的问题。

<el-form-item v-for="(item, index) in form" :key="index">
  <keep-alive>
    <el-input v-if="item.show" v-model="item.value" :rules="item.rules"></el-input>
  </keep-alive>
</el-form-item>

方案四： 使用自定义校验方法

我们可以使用自定义校验方法来解决校验规则失效的问题。自定义校验方法可以动态地根据表单项的显示和隐藏状态来设置校验规则。

const validate = (rule, value, callback) => {
  if (rule.required && !rule.show) {
    callback(new Error('该字段是必填项'));
  } else {
    callback();
  }
};

<el-form-item :rules="[{ validator: validate, trigger: 'change' }]">
  <el-input v-if="show" v-model="value"></el-input>
</el-form-item>

总结

以上四种解决方案都可以有效地解决element ui表单使用v-if切换导致校验规则失效的问题。你可以根据自己的实际情况选择最合适的解决方案。