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来做区分。

Logo

前往低代码交流专区

更多推荐