TDesign 表格分页后数据不更新是怎么回事？

东方岳阳提问于 2026-03-31 13:00:15 阅读 78

组件

我用 TDesign 的 Table 组件做了个带分页的表格，但切换页码时页面数据没变，还是第一页的内容。我明明在 onPageChange 里重新请求了接口，也更新了 data，可表格就是不刷新。

这是我的关键代码：

const handlePageChange = (pageInfo) => {
  fetchData(pageInfo.current, pageInfo.pageSize).then(res => {
    tableData.value = res.list; // 这里赋值了新数据
  });
};

是不是我漏了什么配置？比如需要手动触发更新或者绑定 key？

我来解答赞 7 收藏

反馈

2 条解答

UI诗晴 Lv1

看起来问题出在表格组件的响应机制上。TDesign Table 默认情况下是会自动监听数据变化来刷新界面的，但有时候绑定 key 还是很有必要的。

你可以在 table 上加个 :key="tableKey"，然后每次请求数据成功时更新一下这个 key 值，强制让表格重新渲染：

let tableKey = ref(0);



const handlePageChange = (pageInfo) => {

  fetchData(pageInfo.current, pageInfo.pageSize).then(res => {

    tableData.value = res.list;

    tableKey.value += 1; // 触发重渲染

  });

};

另外检查下 fetchData 函数是不是异步返回有问题。如果接口数据没及时回来，可能会导致显示错乱。还有就是看看浏览器兼容性，某些老版本浏览器可能对这种数据驱动更新支持不太好。

记得把关键的依赖项都写全了，别漏了什么。我之前也遇到过类似情况，折腾了半天才发现是个小细节没处理好。

2026-03-31 20:00

智玲~ Lv1

看起来你在分页切换时确实更新了数据，但表格组件可能没检测到变化。虽然你已经更新了 tableData.value，但我建议给 Table 组件加个 key 属性来强制刷新。

试试这样改：

const handlePageChange = (pageInfo) => {

  fetchData(pageInfo.current, pageInfo.pageSize).then(res => {

    tableData.value = res.list;

    // 这里加个唯一标识符，让表格重新渲染

    tableKey.value = Date.now();

  });

};

然后在你的 Table 组件上加上这个 key 属性：
<t-table :data="tableData" :key="tableKey"></t-table>

这样做效率更高，因为每次分页都会用新 key 触发表格重绘。别担心性能问题，这种简单操作对现代浏览器来说几乎无感。记得初始化时给 tableKey 一个初始值就行。

有时候框架的响应式系统确实会漏掉一些变化，这种简单粗暴的方法反而更可靠。我以前也被这问题坑过，直接加 key 解决了好多类似场景。

2026-03-31 13:10