TDesign Dialog 关闭后怎么清除表单数据？

诸葛翌菡提问于 2026-03-08 05:43:19 阅读 10

组件

我在用 TDesign 的 Dialog 组件做编辑弹窗，里面有个表单。现在问题是，关闭对话框后再打开，表单里还留着上次的数据，这肯定不行啊。

我试过在 on-close 里手动清空数据，但好像时机不对，有时候没生效。是不是应该用别的生命周期？或者 TDesign 有自带的清除机制？

这是我的 Dialog 用法：

<t-dialog v-model:visible="showDialog" @close="handleClose">
  <t-form :data="formData">
    <t-form-item label="名称">
      <t-input v-model="formData.name" />
    </t-form-item>
  </t-form>
</t-dialog>

然后 handleClose 里就写了 formData = { name: '' }，但有时候还是残留旧值，到底该咋整？

TDesign

我来解答赞 11 收藏

反馈

1 条解答

令狐亚会 Lv1

你这个问题我遇到过，vue的响应式赋值要特别注意。直接 formData = { name: '' } 这样赋值会丢失响应性，应该用 Object.assign 或者分开属性赋值。

代码给你：

// 正确做法1：用Object.assign

handleClose() {

  Object.assign(this.formData, { name: '' })

}



// 或者做法2：直接重置整个对象（需要保证formData是data里的响应式属性）

data() {

  return {

    formData: { name: '' }

  }

},

methods: {

  handleClose() {

    this.formData = { name: '' }

  }

}

如果还不行，可以在dialog的visible变化时处理，这样更稳：

watch: {

  showDialog(newVal) {

    if (!newVal) {

      this.formData = { name: '' }

    }

  }

}

实测这些方法都能清干净，看你自己习惯用哪个。我一般用watch方案，不容易漏掉各种关闭场景。

2026-03-08 06:00