elementui提交表单返回成功后自动清空表单的值的实现代码

第elementui提交表单返回成功后自动清空表单的值的实现代码在实际开发中，新增弹窗的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

补充：elementui清空表单数据

1、举例组件代码``

el-formref="searchForm":inline="true":model="form"label-width="80px"

!--prop属性添加到form-item上,需要和绑定数据的最后名称一致--

el-form-itemlabel="名称:"prop="name"

el-inputv-model=""placeholder="请输入内容"/el-input

/el-form-item

el-form-item

el-buttontype="primary"@click="onSubmit"确定/el-button

el-button@click="resetForm('searchForm')"重置/el-button

/el-form-item

/el-form

2、表单加ref属性：ref=searchForm

el-formref="searchForm":inline="true":model="form"label-width="80px"

3、form的每个item加prop属性，否则无法清空,elementUI官方文档中也有说明

el-form-itemlabel="名称:"prop="name"

el-inputv-model=""placeholder="请输入内容"/el-input

/el-form-item

4、绑定点击事件中传入searchForm

el-form-item

el-button@click="resetForm('searchFo