element ui表单重置,elementui表单重置失效
本文主要介绍了Vue元素-ui表单的resetFields无法重置的问题。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
问题背景：第一种解法无法求解重置表单，第二种解法无法求解重置表单。
问题背景
在两种情况下，您不能使用此方法重置窗体。$ refs[表单名]。resetfields()自己开发：
1.模态/组件中的表格填充。如果模态组件没有安装在DOM元素中，就不可能获得表单组件的实例，所以。$refs[formName]将使实例未定义。
2.例如，在编辑表单数据时，需要回显表单数据。我们通常的做法是把表单的rawValue赋值来完成，但是如果我们想在添加新数据之前重置表单，这是无效的。
下面说说以上两个我无法重置表格的问题的解决方法：
第一个无法解决重置表单解决方案
仅当resetFields方法未被定义时，才会调用该方法：
如果(这个。$refs[form]！==未定义){
这个。$refs[form]。resetFields()；
}
第二个无法解决重置表单解决方案
回显填充表单数据的逻辑写在nextTick函数的回调中。可以自行搜索nextTick原理，不多说了。
Vue2.x
fillFormData(原始值){
这个。$nextTick(()={
对于(请用此表格填写){
if (rawValue[key]) {
this . form[key]=raw value[key]；
}
}
});
},
Vue3.x
从“vue”导入{ next tick }；
const fillFormData=()={
nextTick(()={
//数据回显逻辑
})
}
这样，在添加新数据之前，只需再次调用reset form resetFields()即可。
关于Vue Element-ui form resetFields无法重置的问题，本文到此为止。更多相关Vue元素表单resetFields无法重置，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。