resetFields()不生效的原因

編輯用戶

新增用戶

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

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

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

原因：

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

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

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

解決方案：

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

el-form中設置resetFields方法不生效問題

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

前置知識點

• Event loop
• 宏任務與微任務

問題描述

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

問題代碼

// 彈窗
 <el-dialog :visible.sync="dialogShow">
    <el-form ref="refForm" :model="form">
       <el-form-item label="標題" 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賦值結果而非空值。

解決辦法

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

show you code

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

分析

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

這里添加$nextTick，就將賦值過程移出同步任務隊列放到微任務隊列，當Dialog 渲染完畢后才進行賦值，完美的解決了問題。

總結

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

最新評論