?Element ui在重置表單時(shí)需要特別注意
非彈窗情況下
1.指定表單的ref是否正確?
<el-form :model="form"? ref="ruleForm" >
</el-form>
2.確定重置的表單的<el-form-item></el-form-item>是否設(shè)置了prop屬性（多數(shù)是因?yàn)楹雎粤诉@一步）
例如：我們需要清空當(dāng)前的登陸表單
//頁(yè)面部分
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-form-item label="用戶名：" prop="userName">
</el-form-item>
<el-form-item>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
//事件部分
resetForm(formName)
{
this.$refs[formName].resetFields();
}
彈窗情況下
場(chǎng)景：比如我們需要做一個(gè)新增和修改的彈窗，相信各位前端大佬們肯定會(huì)把這個(gè)彈窗抽出做成一個(gè)公共組件，再去寫對(duì)應(yīng)功能的時(shí)候就會(huì)方便許多，但是當(dāng)我們做成公共組件后，點(diǎn)擊編輯，好的沒(méi)問(wèn)題，點(diǎn)擊新增，誒這個(gè)內(nèi)容是什么情況，這不是上次點(diǎn)擊的出現(xiàn)的數(shù)據(jù)嗎？
喔 天哪，新增的表單里怎么也被提交了，相信大家與遇見這個(gè)問(wèn)題以后肯定會(huì)想，在新增的時(shí)候給他清空表單就完美解決了，但是當(dāng)我們?nèi)フ{(diào)用resetFields（）方法的時(shí)候會(huì)發(fā)現(xiàn)沒(méi)有作用，檢測(cè)了一下代碼跟上面沒(méi)用彈窗的時(shí)候一樣的啊，為什么沒(méi)有生效呢？
原因如下：
1.resetFields方法是將form表單的數(shù)據(jù)設(shè)置為初始值但是這個(gè)初始值是在form的 mounted生命周期
被賦值上去的的resetFields方法才會(huì)有效，這里繼續(xù)我們對(duì)于VUE的生命周期鉤子有一定的了解
?他們?cè)谶@個(gè)時(shí)候會(huì)將表單的數(shù)據(jù)進(jìn)行賦值，所以在mounted周期之前賦值的resetFields方法將會(huì)無(wú)效
這時(shí)我們可以在mounted周期之后使用this.$nextTick （（）=>{進(jìn)行表單賦值}）將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待DOM更新。
實(shí)例代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-802813.html
showLogin(data)
{
if (data.type == "add") {
this.logTitle = "添加";
} else if (data.type === "update") {
this.logTitle = "編輯";
//賦值的時(shí)候在這里將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行
this.$nextTick(() => {
this.form.name = data.name;
this.form.age = data.age;
});
}
},這樣一系列操作以后我們?cè)偃フ{(diào)用表單的重置表單就會(huì)生效啦文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802813.html
//重置表單的方法，接收參數(shù)為表單的ref指向
resetForm(formName)
{
this.$refs[formName].resetFields();
}到了這里，關(guān)于Element ui 重置表單resetField（）方法不生效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
