基于element-ui對話框el-dialog初始化的校驗問題解決

不刷新頁面重新打開el-dialog時，如果我們綁定了rules或者某個值需要required，它總會自動校驗。

查看了多個博文，發(fā)現(xiàn)常用的有兩種解決方法(下列方法都可以在其他博文查看，不再細寫，如有需要請自行查詢)：

1.給dialog套上v-if ；

2.在關(guān)閉dialog時,監(jiān)聽關(guān)閉回調(diào),清除校驗。

我在自己的項目里使用了上述兩種方法，都不太好用，自己琢磨出了另一種方法：

<el-dialog @open="openDialog()">

</el-dialog>

調(diào)用dialog打開的回調(diào)

methods:
 
openDialog(){
  this.$nextTick(() => {
    this.$refs.dataForm.clearValidate();
  })
}

初始化dialog時, 拿到變化后的dom, 進行清除校驗

補充知識：Cannot read property 'resetFields' of undefined 問題及引申

問題描述： 使用element開發(fā)我的后臺系統(tǒng)，編輯和新增使用了同一個彈出框<el-dialog><el-form></el-form></el-dialog>

綁定了數(shù)據(jù)data里的commentForm對象

為了在新增彈出框清空表單, 使用了this.$refs[formName].resetFields()

每次第一次點擊新增顯示彈出框，都會報錯

"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

問題原因：

mouted加載table數(shù)據(jù)以后，隱藏的彈出框并沒有編譯渲染進dom里面。

所以@click="dialogFormVisible = true;resetForm('dlgForm')"click彈出的時候$refs并沒有獲取到dom元素導致 'resetFields' of undefined

解決方法：

1、($nextTick dom下一次更新之后)

      resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })        
      },

2、(如果是第一次就點擊新增就沒必要reset, 根據(jù)元素undefined判斷)

        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }

注意事項：對DOM一系列的js操作最好都要放進Vue.nextTick()的回調(diào)函數(shù)中

以上這篇基于element-ui對話框el-dialog初始化的校驗問題解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。