溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
不刷新頁面重新打開el-dialog時，如果我們綁定了rules或者某個值需要required，它總會自動校驗。
查看了多個博文，發現常用的有兩種解決方法(下列方法都可以在其他博文查看，不再細寫，如有需要請自行查詢)：
1.給dialog套上v-if ；
2.在關閉dialog時,監聽關閉回調,清除校驗。
我在自己的項目里使用了上述兩種方法，都不太好用，自己琢磨出了另一種方法：
<el-dialog @open="openDialog()">
</el-dialog>
調用dialog打開的回調
methods:
openDialog(){
this.$nextTick(() => {
this.$refs.dataForm.clearValidate();
})
}
初始化dialog時, 拿到變化后的dom, 進行清除校驗
補充知識：Cannot read property 'resetFields' of undefined 問題及引申
問題描述： 使用element開發我的后臺系統，編輯和新增使用了同一個彈出框<el-dialog><el-form></el-form></el-dialog>
綁定了數據data里的commentForm對象
為了在新增彈出框清空表單, 使用了this.$refs[formName].resetFields()
每次第一次點擊新增顯示彈出框，都會報錯
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""
問題原因：
mouted加載table數據以后，隱藏的彈出框并沒有編譯渲染進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, 根據元素undefined判斷)
if (this.$refs[formName] !== undefined) {
this.$refs[formName].resetFields();
}
注意事項：對DOM一系列的js操作最好都要放進Vue.nextTick()的回調函數中
以上這篇基于element-ui對話框el-dialog初始化的校驗問題解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
