vue el-form 添加 v-if之后，表单校验不生效问题

用 element中 的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；但是发现用 v-if 控制的表单元素总是无法被校验。

用 v-show 来控制的表单元素在隐藏状态下时，表单也会校验这个字段。

【1】使用 v-if：element在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。
【2】使用 v-show：初始化时会生成所有的规则，即使隐藏了也会进行规则校验。

解决方法：

给设置 v-if 的元素加上key值，如下所示：

<div v-if="isBreastfeedingLeave" class="row_display row_comumn_2">
    <el-form-item prop="expirationDate" label="截止日期:"  key="expirationDate">
        <el-date-picker
            v-model="qingjia.expirationDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择截止日期"
            style="width:180px;"
        />
    </el-form-item>
</div>

注：若div中含有多个el-form-item，那么每个el-form-item上都需要加上key，否则其他el-form-item上的校验失效；或者将key加在div上，那么el-form-item上的key就可以省略 

expirationDate: [
          { required: true, message: '请选择哺乳假的截止日期', trigger: ['blur', 'change'] }
        ]

 原因：因为在v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况（同理，所以 v-for 渲染的标签也要加key来区分）。而原本这些标签每一个都是独立的，所以需要添加key来做区分。