在实际开发中，新增弹窗的form表单中输入内容后，新增成功后应该把form表单清空，不然下次再进入新增弹窗时，会有上次新增完的内容
方法一：form表单项少的话可以选择手动删除：
this.loginForm = {
name:'',
username:'',
password:'',
confirm: '',
department: '',
phone: ''
}
方法二：以上的方法当然也是可以的，但是如果form表单有很多项的话，你需要写很多清空代码；
elementui中的form提供resetFields方法，用于清空所有表单数据，前提是表单项中要使用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//注册成功后关闭注册弹窗，记得使用this.方法，不然关闭不了
// this.resetForm(formName)
// this.$refs[this.loginForm].resetFields()
// this.$router.push("/modify")
} else {
this.$message({
type: "error",
message: res.message
})
}
})
}
})
},
补充：element ui 清空表单数据
1、举例组件代码``
<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
<!--prop属性添加到form-item上,需要和绑定数据的最后名称一致-->
<el-form-item label="名称:" prop="name">
<el-input v-model="form.name" placeholder="请输入内容"></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="请输入内容"></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()//重置表单数据
}到此这篇关于elementui提交表单返回成功后自动清空表单的值的文章就介绍到这了,更多相关elementui自动清空表单内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！