表单的resetFileds函数重置为初始值而非清空数据

this.$refs[value].resetFields()

这个函数是用来初始化操作的,只是重置为初始值,并不是清空每个表单字段;重置的为mounted时候的值。

初始值实在created时候确定的,如果在created的时候赋值,那么以后重置均为该初始值字段;

在表单编辑时需要打开表单对其赋值,那么该赋值行为在created时进行的,那么以后赋值均为该初始值;

解决方法:

this$nextTick():在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

数据发生变化后要执行某个操作,DOM并不会马上更新,而是在异步队列被清除时才会进行更新,此时要等待数据变化后Vue更新Dom才能进行操作。

比如:

在表单的编辑和新增Dialog,当我们新增和编辑公用一个页面,通过watch来监听表单数据的赋值,那么当点新增,再点击编辑是不会出现问题的,但是!!!当点击编辑再点击新增时,点击重置this.$refs[value].resetFields(),奇怪的现象出现了! 数据初始为第一次点击编辑的表单数据;

解决方法:在子组件的watch监听方法内的赋值操作放在this$nextTick()内部。

原文地址:https://www.cnblogs.com/alaner/p/14813812.html