前端踩坑记录（Element-push from表单resetFields()重置表单不生效）

各位掘友，大家好，本文用于记录本人学习和开发过程中的坑，如文中有错误还请大家指出。

最近在用vue3＋element-push开发后台管理系统时为了减少代码的重复性，于是将表单数据新增和编辑弹出框封装成组件写在了一起。在我打开编辑弹出框时，里面的表单正常显示数据。

然后在我点击“取消”按钮，调用了表单的resetFields()来重置表单，再打开新增弹出框时就是出现问题了

// 清空表单
const dialogCancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

• 问题出现： from表单resetFields()方法虽然有调用了，但是新增弹出框的小黑子还是蹦了出来，但是新增弹出框的表单还是有数据。

• 小黑子乱蹦的原因 from表单resetFields()方法没有清空数据的原因： 官网文档中的初始值为生命周期 onMounted() 中赋值上去的，因为我在 setup() 时就将 小黑子 表单数据赋值了，

也就是说我的表单初始值就不是空的了，所以我再调用resetFields()方法也是清空不了表单数据。

• 解决方法： 将小黑子放在在 nextTick() 中，将赋值操作定义在 nextTick() 中（保证初始值不被修改）

最后

本文只是自己学习和开发过程中的一个记录，如果对你有帮助那将是我莫大的荣幸。如果感觉有问题，欢迎指出，一起消灭小黑子，一起进步。