Form动态修改表单校验规则后，表单立即爆红的问题

场景

        在页面onMounted初始化时，会根据不同情况动态的修改表单校验规则rules。

        但此时会立刻出现表单立即爆红一片的情况。

解决

1. 配置Form表单属性validate-on-rule-change

validate-on-rule-change

        是否在 rules 属性改变后立即触发一次验证。

        我们配置成false，就不会立即触发了。

<el-form
  ref="ruleFormRef"
  :model="orderForm"
  label-width="120px"
  label-position="left"
  :rules="rules"
  :validate-on-rule-change="false"
></el-form>

2. v-if代替v-show来隐藏表单内容（仅适用于我）

       本项目我们使用v-show来根据条件动态隐藏表单项，同时动态修改该隐藏表单项的校验规则。

       v-show隐藏掉的表单内容，尽管视觉上消失不见，但是仍然会被表单校验检测。

        v-if则会完全销毁元素，不会被表单校验检测到，也避免了动态修改rules这步操作。