element-ui 重置resetFields()不生效

禾火r

已于 2023-12-13 16:05:19 修改

阅读量655

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript vue elementui

于 2023-12-12 20:22:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47702002/article/details/134957987

文章讨论了在Element-UI中使用`resetFields()`方法重置表单数据时失效的问题，提供了两种解决方案：一种是直接修改对象属性，另一种是将form对象赋值给预设的resetForm对象。作者分享了遇到的问题以及尝试的解决策略。

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

element-ui 重置resetFields()不生效

初始化数据

data() {
	  return {
	  	   dialogVisible: false,
	       form: {
	           name: '',
	           age: '',
	           sex: '',
	           birth: '',
	           addr: ''
	       }
	   }
	}

弹窗关闭重置数据

handleClose() {
    // 弹窗关闭的时候清除数据
    this.$refs.form.resetFields()
    this.dialogVisible = false
}

以上操作this.$refs.form.resetFields()未生效直接强制变值，死马当活马医

初始化数据

data() {
	  return {
	  	   dialogVisible: false,
	       form: {
	           name: '',
	           age: '',
	           sex: '',
	           birth: '',
	           addr: ''
	       },
	       resetForm: {
	       	   name: '',
	           age: '',
	           sex: '',
	           birth: '',
	           addr: ''
	       }
	   }
	}

弹窗关闭重置数据

handleClose() {
    // 弹窗关闭的时候清除数据
    this.form = this.resetForm
    this.dialogVisible = false
}