ivew表单校验踩坑记

iview表单必填的*标志显示

使用iview自定义表单校验时，对于v-if显示状态的修改会影响*的显示

情况：

• 使用v-if设置在新增是密码字段显示，编辑时不显示
• 这时校验规则已完成，设置只有办公电话不是必填项
• 切换到编辑时，密码字段消失，但是办公电话前会出现*

代码

<FormItem v-if="modalType===0" label="密码" prop="password">
    <Input type="password" v-model="userForm.password" autocomplete="off"/>
</FormItem>

截图

修改：

将v-if修改为v-show，可以解决这个问题

原因：

• v-if只有在条件成立时才会生成dom
• v-show是先生成dom，再通过css控制显示隐藏