element ui提交表單返回成功后自動(dòng)清空表單的值的實(shí)現(xiàn)代碼
在實(shí)際開(kāi)發(fā)中，新增彈窗的form表單中輸入內(nèi)容后，新增成功后應(yīng)該把form表單清空，不然下次再進(jìn)入新增彈窗時(shí)，會(huì)有上次新增完的內(nèi)容
方法一：form表單項(xiàng)少的話(huà)可以選擇手動(dòng)刪除：
this.loginForm = {
name:'',
username:'',
password:'',
confirm: '',
department: '',
phone: ''
}
方法二：以上的方法當(dāng)然也是可以的，但是如果form表單有很多項(xiàng)的話(huà)，你需要寫(xiě)很多清空代碼；
elementui中的form提供resetFields方法，用于清空所有表單數(shù)據(jù)，前提是表單項(xiàng)中要使用prop屬性，綁定input中的v-model所綁定的字段，才可以被清空：
this.$nextTick(() => {
if(this.$refs.loginForm){
//this.$refs.addForm.clearValidate();
this.$refs.loginForm.resetFields();//個(gè)人喜愛(ài)。clearValidate有時(shí)候驗(yàn)證清不掉，具體原因暫時(shí)沒(méi)找到
}
})
這樣所有使用了prop屬性的表單項(xiàng)都會(huì)被清空
注冊(cè)功能方法的代碼如下:
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: "注冊(cè)成功"
})
// this.loginForm = {
// name:'',
// username:'',
// password:'',
// confirm: '',
// department: '',
// phone: ''
// }
this.$nextTick(() => {
if(this.$refs.loginForm){
//this.$refs.addForm.clearValidate();
this.$refs.loginForm.resetFields();//個(gè)人喜愛(ài)。clearValidate有時(shí)候驗(yàn)證清不掉，具體原因暫時(shí)沒(méi)找到
}
})
this.dialogVisible = false//注冊(cè)成功后關(guān)閉注冊(cè)彈窗，記得使用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ù)的最后名稱(chēng)一致-->
? ? ?<el-form-item label="名稱(chēng):" prop="name">
? ? ??? ?<el-input v-model="form.name" placeholder="請(qǐng)輸入內(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的每個(gè)item加prop屬性，否則無(wú)法清空,elementUI官方文檔中也有說(shuō)明
<el-form-item label="名稱(chēng):" prop="name"> ? ? ?<el-input v-model="form.name" placeholder="請(qǐng)輸入內(nèi)容"></el-input> ?</el-form-item>
4、綁定點(diǎn)擊事件中傳入"searchForm"
<el-form-item>
? <el-button @click="resetForm('searchForm')">重置</el-button>
</el-form-item>5、注冊(cè)事件
resetForm(searchForm) {
? ? this.$refs[searchForm].resetFields()//重置表單數(shù)據(jù)
}到此這篇關(guān)于elementui提交表單返回成功后自動(dòng)清空表單的值的文章就介紹到這了,更多相關(guān)elementui自動(dòng)清空表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element-vue實(shí)現(xiàn)網(wǎng)頁(yè)鎖屏功能(示例代碼)
這篇文章主要介紹了element-vue實(shí)現(xiàn)網(wǎng)頁(yè)鎖屏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Vue 中的插槽在開(kāi)發(fā)組件的過(guò)程中其實(shí)是非常重要并且好用的。下面這篇文章主要給大家介紹了關(guān)于vue具名插槽基本使用的相關(guān)資料，需要的朋友可以參考下2021-05-05
vue element upload實(shí)現(xiàn)圖片本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了vue element upload實(shí)現(xiàn)圖片本地預(yù)覽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3+element 分片上傳與下載相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本文通過(guò)實(shí)例給大家介紹了Vue中使用webpack別名的方法,非常不錯(cuò)，具體一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這兩天學(xué)習(xí)了Vue.js 感覺(jué)組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
手把手教你如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目
Vue可以直接集成html,Vue就是前端框架,使用Vue做前端開(kāi)發(fā)效率非常高,下面這篇文章主要給大家介紹了關(guān)于如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
解決antd 表單設(shè)置默認(rèn)值initialValue后驗(yàn)證失效的問(wèn)題
這篇文章主要介紹了解決antd 表單設(shè)置默認(rèn)值initialValue后驗(yàn)證失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11