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的每个item
加prop
属性(这里最坑)
form的每个item
加prop
属性,并且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中数据的最后的名字一致,否则不能清空
推荐阅读
-
解决Element resetFields()重置表单不生效的问题
-
[转载]解决Element resetFields()重置表单不生效的问题
-
vue 重置data中表单form的值 重置变量
-
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
-
vue 重置data中表单form的值 重置变量
-
解决vue + element dialog弹框 表单无法重置问题
-
火狐浏览器下,表单无法刷新重置的解决办法
-
解决 ElementUI form表单在dialog中重置表单,无法正确重置的问题
-
Vue+ElementUI表单Form重置resetFields()无法重置表单的问题
-
Form表单的重置按钮(type=“reset“)无法重置隐藏Input输入框的值