resetFields()不生效的原因

編輯用戶

新增用戶

點(diǎn)擊編輯的時候，數(shù)據(jù)回顯，沒問題：

點(diǎn)擊取消，會調(diào)用方法

按理說應(yīng)該會把表單清空。但是我們再點(diǎn)擊新增的時候，數(shù)據(jù)并沒有被清空：

原因：

點(diǎn)擊編輯的時候，一旦執(zhí)行showModal.value = true， 就顯示dialog，然后立馬就執(zhí)行Object.assign(userForm, row)

此時數(shù)據(jù)修改了，但是dialog里面的el-form還沒有mounted，也就是說，數(shù)據(jù)是在form表單mounted之前修改的，那么這個修改后的數(shù)據(jù)就成為了form表單的初始值。

而重點(diǎn)是，resetFields方法是用來把表單重置到初始值的，現(xiàn)在初始值都修改成回顯數(shù)據(jù)了，再怎么調(diào)用resetFields都是徒勞

解決方案：

只要在 form 表單 mounted之后再進(jìn)行賦值操作這樣就可以完美解決問題了。

el-form中設(shè)置resetFields方法不生效問題

el-form中設(shè)置resetFields方法不生效 前置知識點(diǎn)問題描述問題代碼定位問題使用排除法 問題分析解決辦法show you code分析

前置知識點(diǎn)

• Event loop
• 宏任務(wù)與微任務(wù)

問題描述

第一次訪問頁面，先進(jìn)行查看、編輯動作，操作結(jié)束退出el-dialog時，el-form綁定的數(shù)據(jù)與校驗(yàn)信息均無法置空，且后續(xù)每次退出時不帶值進(jìn)入，el-form初始值始終為第一次訪問頁面的值，且非刷新頁面無效。

問題代碼

// 彈窗
 <el-dialog :visible.sync="dialogShow">
    <el-form ref="refForm" :model="form">
       <el-form-item label="標(biāo)題" prop="name">
         <el-input v-model="form.name"></el-input>
       </el-form-item>
     </el-form>
 </el-dialog>

// 重置表單信息
 resetForm() {
   this.dialogShow = false;
   this.$refs.refForm.resetFields();
 },
 
// 查看行元素   
skipBtn(row) {
   this.dialogShow = true;
   this.form = JSON.parse(JSON.stringify(row));
},

定位問題

使用排除法

• 表單上沒有添加ref屬性？
• el-form-item沒有添加prop屬性？

可以看到代碼里都有體現(xiàn)，排除代碼編寫問題，去查看文檔，嘗試定位是組件在初始渲染過程中保留的初始值問題。

問題分析

在頁面初始化過程中，若直接對form賦值, 即

this.form = JSON.parse(JSON.stringify(row));

由于Dialog未渲染完畢， 初始值將為第一次對form賦值結(jié)果而非空值。

解決辦法

知道了問題所在，問題就解決一半了，不多說

show you code

// 查看行元素   
skipBtn(row) {
   this.dialogShow = true;
   this.$nextTick(() => {
   		this.form = JSON.parse(JSON.stringify(row));
   }
},

分析

由于Dialog未渲染完畢，才導(dǎo)致初始值將為第一次對form賦值結(jié)果而非空值，那么只需在Dialog渲染結(jié)束后才給form賦值就OK了。

這里添加$nextTick，就將賦值過程移出同步任務(wù)隊(duì)列放到微任務(wù)隊(duì)列，當(dāng)Dialog 渲染完畢后才進(jìn)行賦值，完美的解決了問題。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論