dialog配合表單採坑-無法獲取表單的ref

開發背景

點擊新增用戶按鈕，彈出由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進行清除表單錯誤