TDesign的Dialog组件关闭后再次打开内容不更新怎么办？

UI雨鑫提问于 2026-01-29 13:55:07 阅读 62

组件

在用TDesign的Dialog做用户信息弹窗时遇到个怪问题——第一次打开弹窗能正常显示数据，但关闭后再次点击按钮打开，内容就变成空了。明明数据源已经更新了…

我尝试用ref调用setProps传新数据，但还是不行。看控制台没报错，就是内容不刷新。代码大概是这样的：


const userDialog = ref();
const userInfo = ref({});

function openDialog(data) {
  userInfo.value = data; // 直接赋值
  userDialog.value.setProps({ 
    visible: true,
    content: `姓名：${userInfo.name} | 年龄：${userInfo.age}`
  });
}

后来发现如果把content改成模板里的渲染方式会好一点，但还是存在数据不同步的情况。难道TDesign的Dialog需要特殊处理缓存吗？

TDesign

我来解答赞 5 收藏

反馈

2 条解答

Designer°素伟 Lv1

这问题我踩过血泪教训，TDesign的Dialog组件在关闭时不会销毁实例，而是隐藏DOM，所以第二次打开时用的还是缓存的旧状态。你调setProps更新content，但userInfo.value赋值后没触发content重新计算，数据自然就对不上。

根本解法不是折腾setProps，而是别用content属性传字符串内容。你把内容扔到template里用v-if控制，让Vue的响应式系统来驱动渲染：

<t-dialog :visible="dialogVisible" @close="onClose">

  <div v-if="dialogVisible">

    姓名：{{ userInfo.name }} | 年龄：{{ userInfo.age }}

  </div>

</t-dialog>

然后openDialog改成这样：

function openDialog(data) {

  userInfo.value = data;

  dialogVisible = true;

}

关键点是给t-dialog套一层v-if，或者至少给内部内容加v-if。这样每次打开都会重新渲染子节点，拿到最新的userInfo。如果你坚持用content属性，就得每次手动拼字符串传进去，很容易漏更新。

还有个坑是setProps只改传给组件的props，不影响组件内部的data状态，所以别迷信这个方法。老老实实用响应式数据+模板渲染最稳。

2026-02-13 05:08

Air-津孜 Lv1

这问题跟TDesign的实现机制有关，简单说就是Dialog组件在关闭时其实只是隐藏了，并没有真正销毁。所以第二次打开时，它会复用之前的DOM，导致内容不同步。

解决办法有两种：

第一种，用官方推荐的方式，在visible-change事件里清空内容：

userDialog.value.on('visible-change', (val) => {

  if (!val) {

    userDialog.value.setProps({ content: '' });

  }

});

不过我觉得更好的方式是直接用Vue的渲染机制，把content绑定成动态变量：

// 模板里这样写

<template #content>

  姓名：{{ userInfo.name }} | 年龄：{{ userInfo.age }}

</template>



// 然后你的openDialog函数改成这样

function openDialog(data) {

  userInfo.value = data;

  userDialog.value.setProps({ visible: true });

}

第二种方式更符合Vue的响应式思想，也避免了手动操作DOM带来的麻烦。WP里面很多类似的弹窗插件也是这么处理的，数据变了视图自然就更新了，省心。

2026-01-30 11:20