element-ui、element-plus表单resetFields()无效的坑

一、基本前提：

1、form组件上必须要有ref

2、form-item上必须要有prop属性

二、新增/编辑用一个el-dialog时，先新增再编辑没问题，先编辑再新增未清空

原因

在没有点新增或着编辑时，我的el-dialog弹出框里的内容是空白的，只有header和footer,

并没有body,只有el-dialog弹出时才会加载内容。

resetFields该方法是把表单的数据重置为初始值。并不是清空，因此可以想到：

当我们先新增在编辑，初始值是空的，调用resetFields()方法自然正常。

当我们先编辑在新增，会对表单赋值，初始值就是我们赋的值，调用resetFields()方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。

解决--nextTick

Vue3 nextTick() 函数 | 菜鸟教程

nextTick() 是 Vue 3 中的一个核心函数，它的作用是延迟执行某些操作，直到下一次 DOM 更新循环结束之后再执行。这个函数常用于在 Vue 更新 DOM 后立即获取更新后的 DOM 状态，或者在组件渲染完成后执行某些操作。

为什么需要 nextTick()？

在 Vue 中，当你修改了数据后，Vue 并不会立即更新 DOM，而是将这些更新操作放入一个队列中，等待下一次事件循环时统一处理。这种机制被称为"异步更新队列"。

如果你在修改数据后立即尝试访问 DOM，可能会发现 DOM 还没有更新，从而导致获取的数据是旧的。nextTick() 就是为了解决这个问题而存在的，它确保你的操作在 DOM 更新完成后执行。

nextTick() 的使用场景

以下是一些常见的使用场景：

1. 在修改数据后立即获取更新后的 DOM 状态。
2. 在组件渲染完成后执行某些操作，例如初始化第三方库。
3. 在子组件更新后，父组件需要根据子组件的状态进行某些操作。

在编辑时，弹出框我们先让他初始化结束再赋值。

element-ui（vue2）：

 edit(row) {

                this.visible = true;

                this.$nextTick(()=> {

                  // 赋值

                })

            },

element-plus（vue3）：

import { nextTick } from "vue";
edit(row) {

                visible.value = true;

                nextTick(()=> {

                  // 赋值

                })

            },

参考：

element-ui表单先编辑后新增resetFields()无效的坑_解决 element-ui 表单清空的问题:先编辑后新增 resetfields() 无效-CSDN博客

vue3+element-plus表单重置resetFields方法不生效踩坑_vue3 resetfields-CSDN博客