不刷新頁面重新打開el-dialog時(shí)，如果我們綁定了rules或者某個(gè)值需要required，它總會(huì)自動(dòng)校驗(yàn)。

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

1.給dialog套上v-if ；

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

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

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

</el-dialog>

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

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

初始化dialog時(shí), 拿到變化后的dom, 進(jìn)行清除校驗(yàn)

補(bǔ)充知識(shí)：Cannot read property 'resetFields' of undefined 問題及引申

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

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

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

每次第一次點(diǎn)擊新增顯示彈出框，都會(huì)報(bào)錯(cuò)

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

問題原因：

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

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

解決方法：

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

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

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

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

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

以上這篇基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問題解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論