Element中resetFields()失效的解决办法

最新推荐文章于 2025-07-09 17:09:36 发布

harmsworth2016

最新推荐文章于 2025-07-09 17:09:36 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Element 文章标签： resetFields() resetFields()方法失效

本文链接：https://blog.youkuaiyun.com/harmsworth2016/article/details/89294924

Element 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在使用Element UI的Form组件时，如何有效利用resetFields()方法重置表单到初始状态，特别是在编辑模式下清空表单数据的策略。通过在mounted钩子中设置初始值为空，以及两种实现方法，提供了实现这一需求的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在使用Element的Form组件对一个表格新增、编辑行时进行验证操作，使用resetFields()方法可以重置表单所有字段值为初始值。在编辑表单时，我们希望调用resetFields()方法时将所有表单数据清空，无需再次对每一个表单数组赋值为初始值，然resetFields()将表单数组初始化为回显后的值，如何解决？

resetFields()

resetFields()方法解析

调用resetFields()方法，将表单数据重置为初始值
初始值在表单生命周期的mounted钩子中被赋值
所以，调用resetFields()只会重置为初始值，而不是空值

思路

在mounted钩子执行时，将表单数据赋值为空值。
方案一：

methods: {
	async editForm (params) {
		this.dialogFormVisible = true
		await this.$nextTick()
		this.form = params
	}
}

方案二：

methods: {
	editForm (params) {
		this.dialogFormVisible = true
		setTimeout(() => {
			this.form = params
		}, 0)
	}
}