针对vue重置form表单,总结了一下

1、<el-form>标签加上ref属性,名称自定义,我这里起了searchForm

<el-form ref="searchForm"></el-form>

2、表单项<el-form-item>标签没有添加prop属性,prop属性需要与input框绑定v-model的属性一致

<el-form-item label="名称" prop="name">
       <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
 </el-form-item>

3、需要注意的是:resetField()方法不是将表单重置为空,而是重置为初始值

 如下写法只适合清空当前页面未提交的表单,如果提交了表单,再打开当前表单,表单内容还会显示出来

 resetSearchForm() {
      this.$refs['searchForm'].resetFields()
 }

 还需要在打开表单的时候对绑定的值重新赋空值

this.searchForm.name= '';

Logo

前往低代码交流专区

更多推荐