包含vueresetfields的词条

本篇文章给大家谈谈vueresetfields，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、element-ui 表单编辑之后再新增表单数据无法清空问题（已解决）
• 2、Vue中element-ui的resetFields()方法重置表单无效问题及解决办法
• 3、Vue处理表单校验
• 4、Vue el-form表单resetFields与clearValidate方法失效的三个坑

element-ui 表单编辑之后再新增表单数据无法清空问题（已解决）

问题场景：

vue element ui在做编辑和添加时候使用同一个组件页面，先点击编辑然后在点击新增，此时表单数据不清空，使用this.$refs[dataForm].resetFields()也升斗无效。

问题原因：

点击编辑 再点击添加，这时候数据已经赋值了，this.$refs['dataForm'].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单前派第一次在页面中渲染时所用的数据就是初始数据，表单渲染时就会将这个修改对象作为初始值，所以出现无效了。

解决方法：

（1）用 nextTick(() = {

this.$refs['dataForm'].resetFields();

});

（2）如果（1）不行的话就直接在页面慧笑贺初始的时候将表单数据重置：

this. refs['dataForm'].clearValidate() //移除表单项的校验结果

});

for(let key in this.dataForm){

this.dataForm[key]=""

}

以上over~

Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

1.当新增和编辑都同用一个弹窗实现的时候，此时无法达到清除表单的效果。

查看 官网地址 介绍， 注意：resetField()方法不是将表单重置为空，而是重置为初始值

而这个初始值是如何定义的呢？

我尝试了一下，初始值的定义应该为第一次打开弹窗的值。换句话说，如果是打开新建的表单，那么初始值就都为空，如果羡余轮打开是编辑的弹窗表单，那么初始值就为编辑的。（具体没有看源码深层次确定）

2.表单项el-form-item没有添毁袜加prop属性，prop属性需要与input框绑定的属性一致

针对一

我手动清空了一下formData的数据。

注意点 ，清空不可以直接等于{}。我采取的方法为写一个公共的方法，递归将其属性都赋值为null 或者 ""。如下方式不可取

那何时清空这个数据最合理呢？

我选择在弹窗关闭的事件回调中清空。原因为点击取消关闭弹框要清空，兄信点击确定完成操作要清空，点击关闭要关闭并清空，点击空白也是关闭弹窗并清空。所以选择弹框的closed回调中清空数据。

针对二

检查属性对应的。确保书写没问题。

Vue处理表单校验

1、vue使用element-ui的form表单验证

问题描肆岩述：第一次点击新增时正常，第二次新增打开弹窗后由于表单内容为空，出现验证这种情况。

解决 ： this.$refs.staffForm.resetFields();//等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields()，去除验证（clearValidate），（resetField表单重置）

//打开弹窗的新增方法

addStaff() {

 裂搭御     this.staffVisible = 枝段true;//弹窗打开

      this.$nextTick(()={

         this.$refs.staffForm.resetFields()

        this.$refs.staffForm.clearValidate()

      });

},

[img]

Vue el-form表单resetFields与clearValidate方法失效的三个坑

1.在el-form标签顷物消中 必须要绑定一个model，而且必须是:model，不能蚂逗是v-model ，这个是element-ui那边规定雀知

2.prop属性需要和上述model绑定的对象里的字段完全一致

3.调用方法是this.$refs["refName"].resetFields()，注意是 this.$refs

关于vueresetfields和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。