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博客

相关推荐
满分观察网友z几秒前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog2 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构6 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙13 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1114 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆18 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er23 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0626 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444029 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆29 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js