el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题

1、场景
在实际工作开发中，我们在处理el-form表单校验问题时常会遇到这样一种情况：根据不同的条件，展示不同的el-form-item，这个时候我们就需要考虑表单元素的显示与隐藏。在vue中，控制显示隐藏的有两个指令：v-if和v-show。
【1】两者不同点：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
【2】原理：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
【3】编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
【4】性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
【5】使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

2、指令的选择
【1】首先我选择使用v-if来控制el-form-item元素的显示隐藏，但是在使用过程中发现，使用v-if来控制的el-form-item元素，在后续的条件切换显示中，会造成表单校验失效的问题。
【2】由于v-if存在表单校验失效的问题，所以后续我又尝试了使用v-show来控制，但是v-show也存在一个问题，j就是即使el-form-item元素被隐藏了，它的校验也会生效。
原因分析：
【1】使用v-if：element在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。
【2】使用v-show：初始化时会生成所有的规则，即使隐藏了也会进行规则校验。

3、解决
查阅相关资料后,发现一个简单粗暴的方法，即给在v-if的元素上加上key值，便能解决v-if带来的表单校验失效的问题，代码如下：

<el-form-item label="收货人"
      prop="CNParty.partyDescription"
      key="CNParty.partyDescription"
      v-if="goOrder.mfOrder.bookingType == 1">
      <el-input :autosize="{ minRows: 2, maxRows: 6 }"
          type="textarea"
          v-model="goOrder.CNParty.partyDescription"
          name="CNParty.partyDescription">
      </el-input>
</el-form-item>

原因：因为在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的，所以需要添加key来做区分。
————————————————
版权声明：本文为CSDN博主「我在小楼听着风」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44490109/article/details/111868791