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控制顯示隱藏