開發背景
點擊新增用戶按鈕,彈出由el-form表單組成的dialog,表單存在判空規則, 提交時表單項不合格, 會提示相應的規則錯誤,如圖一所示,關閉按鈕再點擊按鈕,發現錯誤提示不會消失。
圖一 表單提交提示錯誤
解決辦法
出現這個問題我們理所應當想到在點擊按鈕事件中使用this.$refs["formName"].resetFields()【formName是給el-table ref名稱】進行清除表單錯誤,此時會報錯, 因爲此時表單在dialog中還未刷新出來, this.$refs['accountForm']爲undefined;所以我們需要轉換一下思路,在dialog關閉的時候調用this.$refs['accountForm'].resetFields()重置表單錯誤提示信息即可。
resetFields方法介紹如圖二。
<el-dialog
:title="title"
:visible.sync="accountFlag"
align="center"
width="40%"
@close="$refs['accountForm'].resetFields()"
>
</el-dialog>
圖二 使用resetFields進行清除表單錯誤