vue 表单重置功能

1、标签加上ref属性,名称自定义

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

2、表单项标签添加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()方法不是将表单重置为空,而是重置为初始值
vue 表单重置功能_第1张图片
如下写法只适合清空当前页面未提交的表单,如果提交了表单,再打开当前表单,表单内容还会显示出来

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

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

this.searchForm.name= '';

你可能感兴趣的:(vue.js,vue,elementui,前端)