element ui提交表單返回成功后自動清空表單的值的實現(xiàn)代碼
更新時間：2022年08月26日 14:38:57 作者：機(jī)車柑仔店
這篇文章主要介紹了elementui提交表單返回成功后自動清空表單的值,本文通過兩種方法結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
在實際開發(fā)中，新增彈窗的form表單中輸入內(nèi)容后，新增成功后應(yīng)該把form表單清空，不然下次再進(jìn)入新增彈窗時，會有上次新增完的內(nèi)容
方法一：form表單項少的話可以選擇手動刪除：
this.loginForm = {
name:'',
username:'',
password:'',
confirm: '',
department: '',
phone: ''
}
方法二：以上的方法當(dāng)然也是可以的，但是如果form表單有很多項的話，你需要寫很多清空代碼；
elementui中的form提供resetFields方法，用于清空所有表單數(shù)據(jù)，前提是表單項中要使用prop屬性，綁定input中的v-model所綁定的字段，才可以被清空：
this.$nextTick(() => {
if(this.$refs.loginForm){
//this.$refs.addForm.clearValidate();
this.$refs.loginForm.resetFields();//個人喜愛。clearValidate有時候驗證清不掉，具體原因暫時沒找到
}
})
這樣所有使用了prop屬性的表單項都會被清空
注冊功能方法的代碼如下:
register(){
if (this.loginForm.password !== this.loginForm.confirm) {
this.$message({
type: "error",
message: '2次密碼輸入不一致！'
})
return
}
this.$refs['loginForm'].validate((valid) => {
if (valid) {
request.post("/user/register", this.loginForm).then(res => {
if (res.code === 200) {
this.$message({
type: "success",
message: "注冊成功"
})
// this.loginForm = {
// name:'',
// username:'',
// password:'',
// confirm: '',
// department: '',
// phone: ''
// }
this.$nextTick(() => {
if(this.$refs.loginForm){
//this.$refs.addForm.clearValidate();
this.$refs.loginForm.resetFields();//個人喜愛。clearValidate有時候驗證清不掉，具體原因暫時沒找到
}
})
this.dialogVisible = false//注冊成功后關(guān)閉注冊彈窗，記得使用this.方法，不然關(guān)閉不了
// this.resetForm(formName)
// this.$refs[this.loginForm].resetFields()
// this.$router.push("/modify")
} else {
this.$message({
type: "error",
message: res.message
})
}
})
}
})
},
補(bǔ)充：element ui 清空表單數(shù)據(jù)
1、舉例組件代碼``
?<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
? ? ?<!--prop屬性添加到form-item上,需要和綁定數(shù)據(jù)的最后名稱一致-->
? ? ?<el-form-item label="名稱:" prop="name">
? ? ??? ?<el-input v-model="form.name" placeholder="請輸入內(nèi)容"></el-input>
??? ? </el-form-item>
? ? ?<el-form-item>
? ? ? ? <el-button type="primary" @click="onSubmit">確定</el-button>
? ? ? ? <el-button @click="resetForm('searchForm')">重置</el-button>
? ? ? </el-form-item>
?</el-form>2、表單加ref屬性：ref="searchForm"
<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
3、form的每個item加prop屬性，否則無法清空,elementUI官方文檔中也有說明
<el-form-item label="名稱:" prop="name"> ? ? ?<el-input v-model="form.name" placeholder="請輸入內(nèi)容"></el-input> ?</el-form-item>
4、綁定點擊事件中傳入"searchForm"
<el-form-item>
? <el-button @click="resetForm('searchForm')">重置</el-button>
</el-form-item>5、注冊事件
resetForm(searchForm) {
? ? this.$refs[searchForm].resetFields()//重置表單數(shù)據(jù)
}到此這篇關(guān)于elementui提交表單返回成功后自動清空表單的值的文章就介紹到這了,更多相關(guān)elementui自動清空表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文通過實例代碼給大家介紹了vue 瑩石攝像頭直播視頻功能，文章還給大家提到了vue h5項目調(diào)用手機(jī)攝像頭錄像并上傳的功能，需要的朋友可以參考下2018-08-08
Vue3 Ref獲取真實DOM學(xué)習(xí)實戰(zhàn)
這篇文章主要為大家介紹了Vue3 Ref獲取真實DOM學(xué)習(xí)實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue中監(jiān)聽scroll事件失效的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的方法
觸底時,繼續(xù)向后端發(fā)請求獲取下一頁的數(shù)據(jù),請求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue中屬性執(zhí)行順序,選項的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods，具體詳細(xì)內(nèi)容本文給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue?elementUI?處理文件批量上傳方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本文主要介紹了Vue實現(xiàn)table列表項上下移動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
前端在做增刪改查時通常會使??個唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關(guān)于Vue3前端生成隨機(jī)id(生成?UUID)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄時的圖片驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04