vue+elementui(對話框中form表單的reset問題)
對話框中form表單的reset問題
一般在新增和編輯的時候用的都是同一個對話框和form表單，而在先點擊編輯的時候form表單的resetfileds函數(shù)就會失效
解決原理
實際上結(jié)構(gòu)是（通過vue類比）
data里面有一個form表單的初始值，methods里面定義了一個resetfileds的函數(shù)resetfileds函數(shù)的作用:記錄在mounted生命周期執(zhí)行之前最后一次form表單中對象的值,并且重新開啟效驗
在mounted周期中resetfileds函數(shù)會自動執(zhí)行一次
實際運行：當?shù)谝淮吸c開dialog的時候，form對象第一次被創(chuàng)建，dom加載，即自動運行一次resetfileds函數(shù)（此時已經(jīng)記錄了初始值）
在后面當再一次調(diào)用resetfileds函數(shù)的時候就會把函數(shù)中記錄的對象值賦給form表單，所以如果是先點擊編輯的情況下，form表單在點擊新增時不會清空數(shù)據(jù)
解決辦法
1：可以再新增時手動清除數(shù)據(jù)（缺點：此時resetfileds函數(shù)中記錄的值并沒有改變，還是當時第一次點擊編輯的時候賦的值，但不影響使用）
2：第一次加載dom時如果要修改data中定義的form對象值，那么要將修改操作放在form表單dom元素加載完以后，即mounted生命周期之后（比較推薦的方式）
代碼：第一次加載dom時如果要修改data中定義的form對象值，放在$nextTick中執(zhí)行（即等待resetfileds函數(shù)執(zhí)行以后再去把編輯或者新增的值賦值給form表單，這樣子，resetfileds函數(shù)記錄的就是form表單中data定義的初始化值）
element UI form表單重置無效
element 組件庫里面重置有兩個方法resetField和clearValidate，但是這兩個方法，要用這兩個方法肯定是要用ref實例化一個表單，用實例化的對象去重置表單，但是經(jīng)常性的無效
實例化是
<el-form ref="operateForm" :model="form" :rules="rules">
使用方式經(jīng)常是
this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()
說下解決
resetForm() {?? ?//?? ?注意：在這個方法中重置
? ? ? this.image = []
? ? ? this.form = {
? ? ? ? images: []
? ? ? }
? ? }手動重置表單數(shù)據(jù)，然后用方法去重置規(guī)則狀態(tài)
this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()?? ? //注意：在進到表單之前重置，我這邊的話是彈框，我寫在打開彈框的方法中的
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)可移動的懸浮按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
vue?cesium加載點與定位到指定位置的實現(xiàn)方法
Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導航等,這篇文章主要介紹了vue?cesium加載點與定位到指定位置,需要的朋友可以參考下2024-03-03
今天小編就為大家分享一篇淺談vue方法內(nèi)的方法使用this的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了vue 設置背景顏色及透明度的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了關(guān)于VueRouter導入的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue + typescript + 極驗登錄驗證的實現(xiàn)方法
這篇文章主要介紹了vue + typescript + 極驗 登錄驗證的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了Vue引入jquery實現(xiàn)平滑滾動到指定位置的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
前端Vue?select下拉框使用以及監(jiān)聽事件詳解
由于前端項目使用的是Vue.js和bootstrap整合開發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽事件的相關(guān)資料,需要的朋友可以參考下2024-03-03