TDesign对话框关闭后表单内容未重置怎么办？

子荧~ 提问于 2026-02-05 10:14:27 阅读 22

组件

用TDesign的Dialog做表单弹窗时遇到个问题，每次关闭对话框再打开，之前填写的内容还在，怎么都清不掉…

我这样写的：在setup里用ref存表单值，关闭时手动设为空了啊：


const dialogVisible = ref(false)
const formData = ref({ name: '', desc: '' })

const handleClose = () => {
  formData.value = { name: '', desc: '' } // 这里明明重置了
  dialogVisible.value = false
}

但实际操作时，关闭对话框再打开，输入框还是残留上次的数据。试过在onUpdated钩子清空也不行，控制台也没报错，到底是哪里没重置干净啊？

我来解答赞 5 收藏

反馈

2 条解答

Designer°怡萱 Lv1

你这个情况其实挺常见的，问题出在Vue的响应式机制和DOM复用上。虽然你重置了formData，但TDesign的Dialog组件默认会缓存内部的DOM结构，下次打开时直接复用，导致表单控件还保留着之前的值，尤其是输入框这种原生元素。

解决方法有两个方向，我推荐第一个：

第一种是直接让Dialog每次关闭时销毁内部内容，加个destroy-on-close属性就行

<tdialog v-model:visible="dialogVisible" :destroy-on-close="true">

  <tform>

    <tinput v-model="formData.name" />

    <tinput v-model="formData.desc" />

  </tform>

</tdialog>

这样关闭时整个内容会被销毁，重新打开就是全新的实例，自然就干净了。

第二种是不销毁但强制重置，需要在关闭后手动触发一下表单重置，比如用nextTick确保DOM更新后再清空，但这容易有延迟或遗漏，不如上面那个彻底。

另外提醒一点，你现在的重置方式没问题，但要注意如果表单字段多的话，建议定义一个初始值对象，防止注入或漏字段

const initialData = { name: '', desc: '' }
formData.value = { ...initialData }

这样维护起来也安全些，字段一多不容易出错

2026-02-11 20:00

极客路杨 Lv1

你这个问题应该是表单组件内部状态没跟着清掉。光清空formData还不够，得手动触发表单重置

TDesign的表单组件一般会维护自己的状态，你直接赋空值不会触发组件内部的更新。应该用表单实例的reset方法

试试这样改：

const formRef = ref()
const dialogVisible = ref(false)
const formData = ref({ name: '', desc: '' })

const handleClose = () => {
formRef.value.reset() // 用表单实例的reset方法
dialogVisible.value = false
}

然后在模板里给表单加ref：

如果表单组件没提供reset方法，那就得用nextTick等DOM更新完再清：
const handleClose = () => {
dialogVisible.value = false
nextTick(() => {
formData.value = { name: '', desc: '' }
})
}

这种问题在服务端渲染的时候尤其要注意，组件状态和DOM要同步才能清干净

2026-02-05 10:16