Element 對話框-Dialog

在dialog中重置表單的方法

在 dialog取消按鈕或者在對話框關閉的 before-colse事件中添加：

closeDiglog(){
    //$nextTick()是一個異步事件
    //彈出窗口打開之后,需要加載DOM,所以不用異步事件,獲取不到表單DOM
    this.$nextTick(()=>{
        //清空驗證
        this.$refs['Form'].clearValidate();
        //清空表單
        this.$refs['Form'].resetFields()
    })
}

注意:清空表單一定要給el-form-item添加prop屬性,不然重置表單無效

<el-form-item label="申請人身份證" prop="id_num">

上面為一種清空方式
還有種清空方式為 ：

<el-dialog 
:close-on-click-modal="false" 
:title="dialogTitle" 
:visible.sync="dialogFormVisible" 
@close="closeDialog">
</el-dialog>				
<!-- ↑監聽dialog關閉事件,進行表單清空,無需異步 --> 

最簡單粗暴就是在dialog對話框添加v-if，下次打開對話框重新渲染即可。

<el-dialog
  title="事項受理"
  v-if="dialogFormVisible"
  close-on-press-escape
  :before-close="closeDiglog"
  width="430px"
>

dialog中表單resetFields並沒有清空表單

常見的出行情況為 表單回顯的時候 並沒有清空 而是重置為上一次的值

按照文檔的說法

resetFields	對整個表單進行重置，將所有字段值重置為空並移除校驗結果

但是實際上resetFields是清空validateMessage，然后將值重置為上一次初始化的值。

解決辦法:

這個問題的本質是因為你編輯時，第一次打開對話框的時候給表單綁定的模型賦值了，
這時候這個模型的初始值就變成了你所賦值的值，所以resetFields的時候，替換模型對應的每個值重置到初始值，
這時候的初始值就是你編輯時賦值的那個值，而不是在數據里聲明的初始值，解決方式是，等dialog已經初始化安裝之后再給模型賦值，也就是
this.$nextTick(() => { // 這里開始賦值 this.formData = xxx; })

form表單里有upload組件時報錯

瀏覽器報錯

Uncaught TypeError: Cannot set property 'status' of undefined
    at s.handleProgress (vendor.dll.js:44)
    at Object.onProgress (vendor.dll.js:44)
    at XMLHttpRequestUpload.t.upload.t.upload.onprogress
     (vendor.dll.js:44)

原因很簡單，由於這個表單是在一個彈框 里面的,所有當彈框關閉時/的所有組件都不能再次引用，比如說操作了 file,file-list屬性時，就會出現 undefined錯誤 ,所以在使用彈窗的時候一定要注意異步操作等所有操作完畢才可以關閉彈框