欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue+ElementUI表单Form重置resetFields()无法重置表单的问题

程序员文章站 2022-04-04 12:54:38
...

Vue+ElementUI表单Form重置resetFields()无法重置表单的问题

在使用ElementUI的from表单的重置时总是不行,无法通过this.$reds[formName].resetFields()清空表单数据

后来查找资料,看博客总结如下两种方法:

方法一

form表单数据赋值为{}

this.form = {};

即可。

方法二

方法二是调用Form表单的resetFields()方法,比较繁琐

1. 给表单加别名

<el-form>标签中加ref属性

<el-form ref="userForm" ...>
	......
</el-form>

2. form的每个itemprop属性(这里最坑)

form的每个itemprop属性,并且prop的名字需要和绑定的数据的名称一致,注意prop的属性是加到<form-item>标签上的

<el-form-item label="姓名" prop="name">
   <el-input v-model="form.name"></el-input>
</el-form-item>

3. 绑定点击事件中传入Form的ref名字

<el-form-item>
	<el-button @click="addCancel('userForm')">取消</el-button>
</el-form-item>

4. 注册点击事件

methods中注册点击事件,再事件中调用resetFields()方法清空Form表单。

addCancel(formName) {
    this.$refs[formName].resetFields();
}

注意:要清空的地方必须绑定prop属性,并且和form中数据的最后的名字一致,否则不能清空