vue+element-ui this.$refs['form'].resetFields()方法重置表单无效的坑

原创 创建时间:2019-06-29 访问量:60 赞:0 踩:0

1、用法不对

要想this.$refs['form'].resetFields()方法有效,必须配置el-form :model 属性和el-form-item中的prop属性,才可以。

2、坑1

在还没有显示对话框之前就调用this.$refs['form'].resetFields(),会报错。

解决方法:

this.$nextTick(() => {
this.$refs['form'].resetFields();
});

3、坑2

如果添加和修改共用一个表单时就会出现重置无效的情况。

解决方法:

this.$nextTick(() => {
utils.copyFormObject(data, this.form);
});

将为表单对象赋值的操作放在对话框显示之后的一个执行周期执行。

4、为什么要放在$nextTick()中就可以了

this.$refs['form'].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,如果修改对象的表单赋值没有放在nextTick中,就会在表单渲染时就会将这个修改对象作为初始值,所以出现无效了。使用nextTick保证表单在第一次渲染时是空值就可以了。







评论
 我想说:
==已经到底了==
关注: 粉丝: 积分:
Copyright ©2018 工联信息网——打造最实用且免费的互联网资源共享社区
如有疑问和需求请致邮箱:need@glxxw2018.com
不良信息反馈及建议请致邮箱:accusation@glxxw2018.com
沪ICP备18018158号-1