el-form动态表单切换导致的校验bug（v-if、v-show导致校验失效的bug）

使用v-if还是v-show

使用el-form来做表单验证时，有时候选择的条件不同，展示的el-form-item也不一样，
这时候就需要控制输入框的展示与隐藏。那么，用v-if还是v-show呢？

• v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要频繁的切换，使用v-show，否则，使用v-if。

表单验证bug

当使用v-if或v-show来控制el-form-item的显示与隐藏时，会出现校验失效的bug。

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

解决办法：自定义校验规则

自定义校验规则，先判断条件，再进行校验。

• 控制输入框显示的代码

<el-form-item label="是否展示" prop="inputValue" v-show="showFlag == 0">
  <el-input v-model ="form.inputValue" placeholder="满足showFlag为0则显示"/>
</el-form-item>

• 自定义的校验规则

const checkInputValue = (rule, value, callback) => {
   if(this.showFlag == 0){
     if (value === ''|| value === null) {
          return callback(new Error('是否展示不能为空'));
        }
        else {
          callback()
        }
   }else {
     callback()
   }
};