鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 如何讓element-ui的dialog每次顯示的時(shí)候做一次初始化

如何讓element-ui的dialog每次顯示的時(shí)候做一次初始化

dialog中有個(gè)<my-form :action="action">子組件，新增和編輯都會(huì)使用該組件，區(qū)別是傳入的action分別是add和edit，現(xiàn)在遇到的問題是完成一次新增/編輯操作之后再次打開dialog的時(shí)候，表單中還殘留著上一次填寫的數(shù)據(jù)，有沒有辦法在dialog每次顯示的時(shí)候根據(jù)action做一次“初始化”來清空一下data？

PS：如果不用dialog而是用路由，我是在每次進(jìn)入路由的時(shí)候根據(jù)action做初始化的，dialog這不知該如何處理了，因?yàn)閐ialog始終都存在只是顯示和隱藏，created、mounted等事件都無法保證在每次顯示的時(shí)候觸發(fā)。有人說在保存之后觸發(fā)一個(gè)回調(diào)事件，可是也有可能填寫表單之后不保存直接關(guān)閉對(duì)話框呀。這個(gè)需求在以往的函數(shù)式開發(fā)框架中是特別簡單自然的事情，到了vue等數(shù)據(jù)驅(qū)動(dòng)框架這卻發(fā)現(xiàn)頗費(fèi)腦筋，是我的思路不對(duì)嗎？

回答
編輯回答
有點(diǎn)壞

關(guān)閉dialog框的時(shí)候清空就可以了。

@close="loginDialog=false,resetForm('loginForm')" 

resetForm(formName) {
  this.$refs[formName].resetFields();
}

上面的代碼是我在elementUI上的做法。

2017年10月29日 00:05
編輯回答
影魅

在子組件中監(jiān)聽父級(jí)傳過來的值

watch: {
    editId: function(newValue, oldValue) {
        console.log(oldValue) // 舊的值
        console.log(newValue) // 新的值
    }
}
2017年1月28日 01:43
編輯回答
笑浮塵

打開模態(tài)框, 需要異步清除或者替換模態(tài)框的數(shù)據(jù):
this.$nextTick(() => { //等待dom同步后打開模態(tài)框
this.$refs['ruleForm'].resetFields(); //重置,清楚之前的錯(cuò)誤或正確提示
模態(tài)框的formData = 列表rowData; //eidt 如果是add rowData = {};
});
知識(shí)點(diǎn): 模態(tài)框的異步加載,需要待dom加載完成后,獲取和填充數(shù)據(jù).

2018年7月17日 07:00
編輯回答
乖乖噠

雖然新建和編輯都使用同一模態(tài)框，按正常邏輯，新建所有內(nèi)容都應(yīng)該清空，可以使用el-form的resetFields方法，而編輯內(nèi)容應(yīng)該是需要將原始內(nèi)容進(jìn)行回顯的，這個(gè)時(shí)候要將form表單各項(xiàng)內(nèi)容進(jìn)行回顯即可。給form表單中的各個(gè)元素均雙向綁定一個(gè)數(shù)據(jù)，如選擇add那么將內(nèi)容清空，如edit則將內(nèi)容回顯

2017年6月27日 09:24
編輯回答
熊出沒

問題解決了嗎？我也遇到這個(gè)問題了，求告知

2018年3月9日 16:49
編輯回答
焚音
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"

在dialog上面添加v-if='dialogVisible'

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  v-if='dialogVisible'

這樣就初始化了

2017年1月18日 17:26