iview表单动态校验 提示信息错位

一开始我们对表单所有项进行校验，可以看到校验信息是正常的：

然后我们取消一个口，通过v-if指令，justHz为false来隐藏掉对应的表单行：

<FormItem label="执行标准适用国别" prop="standardPlace" v-if="justHz" :rules="{ required: justHz, message: `请选择执行标准适用国别`, trigger: 'blur' }">
        <Select v-model="form.data.standardPlace" >
          <Option
            v-for="item in countries"
            :value="item.code"
            :key="item.code">{
   
   { item.name}}</Option>
        </Select>
        <div class="formItem">该商品执行标准适用国别</div>
      </FormItem>

这时候就出现问题了，虽然【执行标准适用国别】表单行隐藏了，但是它的提示信息还在：

原因是虽然FormItem隐藏掉了，但是我们校验信息并没有及时刷新，校验信息还在dom里面。

直接在表单行的外层加v-if来把整个dom都去除掉：

<div  v-if="justHz">
<FormItem label="执行标准适用国别" prop="standardPlace" :rules="{ required: justHz, message: `请选择执行标准适用国别`, trigger: 'blur' }">
        <Select v-model="form.data.standardPlace" >
          <Option
            v-for="item in countries"
            :value="item.code"
            :key="item.code">{
   
   { item.name}}</Option>
        </Select>
        <div class="formItem">该商品执行标准适用国别</div>
      </FormItem>
 </div>

这样就能做到实时校验了