[Component] [drawer, form] ElDrawer组件在和ElForm组件搭配使用时，启用:destroy-on-close="true"属性，form表单的部分数据依然存在

[DaChuanHaiyanZhang]

Bug Type: Component

Environment

• Vue Version: 3.5.13
• Element Plus Version: 2.10.5
• Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0
• Build Tool: Vite

Reproduction

Related Component

• el-drawer
• el-form

Reproduction Link

Link

Steps to reproduce

点击案例中的【打开弹窗】在表单中输入内容，然后关闭弹窗，再重新打开，表单中的数据依然存在

What is Expected?

按照我的理解实际上是在关闭的时候会直接销毁，并且重置为初始化状态

What is actually happening?

表单并未重置，需要做很多的操作，例如重置form的model值，甚至还要在关闭之前调用更多的方法来重置

Additional comments

这个问题貌似在dialog组件中也存在，希望引起重视，或者给一个合理的解决方案，复杂表单的处理简直让人欲哭无泪啊。

[snowbitx]

文档说明该属性用于控制 Drawer 关闭时是否销毁子元素。测试发现，即使使用 v-if 的输入框在 DOM 中被销毁，其输入值仍会被保留，可见这是预期的设计行为。

[DaChuanHaiyanZhang]

文档说明该属性用于控制 Drawer 关闭时是否销毁子元素。测试发现，即使使用 v-if 的输入框在 DOM 中被销毁，其输入值仍会被保留，可见这是预期的设计行为。

这个有什么直接有效的解决方案吗？目前使用起来太痛苦了

[rzzf]

在Drawer关闭前调一下formRef.resetFields()就可以了，你说的复杂情况有具体的例子吗？

[DaChuanHaiyanZhang]

在Drawer关闭前调一下formRef.resetFields()就可以了，你说的复杂情况有具体的例子吗？

有的，比如多层的object，或者object中包含数组等，以及还有一些变量都无法重置，要写死人的

[rzzf]

有的，比如多层的object，或者object中包含数组等，以及还有一些变量都无法重置，要写死人的

可以提供一个repo吗？目前的情况只是ruleForm因为双向绑定保留了数据

[SpanManX]

是不是有赋值初始值？赋值初始值需要一个延迟

[DaChuanHaiyanZhang]

有的，比如多层的object，或者object中包含数组等，以及还有一些变量都无法重置，要写死人的

可以提供一个repo吗？目前的情况只是ruleForm因为双向绑定保留了数据

感谢关注啊，目前确实没时间去做这个东西，因为最近在赶开发进度，我可以给你们截一下我的业务代码你看可以吗

[DaChuanHaiyanZhang]

是不是有赋值初始值？赋值初始值需要一个延迟

试过了，就是销毁的时候内容没有得到清理，包括变量也是，我做开发时间也很长了，基本都会尝试一下

[btea]

这是正常逻辑，组件销毁只是会销毁组件内部的变量，给表单组件赋值的变量在当前组件内，不会销毁。如 @cszhjh 所说，你可以在关闭 drawer 前调用 resetFields 方法进行重置。示例

[DaChuanHaiyanZhang]

这是正常逻辑，组件销毁只是会销毁组件内部的变量，给表单组件赋值的变量在当前组件内，不会销毁。如 @cszhjh 所说，你可以在关闭 drawer 前调用 resetFields 方法进行重置。示例

这个实际上也是很多开发者无法理解或者是诟病的问题，如果每次都需要这么操作，drawer和dialog对于稍微复杂一点的表格将没什么意义，可能是你这里写业务场景比较少吧，无法理解这种痛苦，个人看法勿cue，ep当然非常优秀

[btea]

不，我的日常工作中也是用ep开发的，经常会遇到弹窗里面表单数据未重置问题，只能手动重置。要么使用resetFields 方法，要么克隆一份初始数据，重置的时候进行还原。

[DaChuanHaiyanZhang]

resetFields

好吧... resetFields 要是能解决这个问题，我直接哭死，希望会有能全部销毁的方法吧，真的，要是没有我当然也没办法，只是提一个建议

[btea]

你上面提供的示例，通过 resetFields 是可以解决的。你有什么更复杂的场景有问题吗？

[WangJincheng4869]

这个实际上也是很多开发者无法理解或者是诟病的问题，如果每次都需要这么操作，drawer和dialog对于稍微复杂一点的表格将没什么意义，可能是你这里写业务场景比较少吧，无法理解这种痛苦，个人看法勿cue，ep当然非常优秀

其实可以这样理解，假设在组件 A 中使用 drawer 。

• 其实 drawer 属于组件 A 的一部分
• 在 drawer 的插槽内的表单数据如果是存在组件 A 中。那么表单的数据也属于组件 A。
• drawer 的销毁其实只是销毁自己的元素，无法销毁组件 A 中的数据，所以你要自己去监听事件去清除

其实还有一种做法，就是将自己的表单组件单独封装成一个组件，请求、数据等全在这个组件中。把这个组件用在 drawer 的插槽中，理论上是可以同时销毁的。

[WangJincheng4869]

@DaChuanHaiyanZhang 可以看一下这个 demo，独立组件的方式可以实现你想要的效果。