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

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

组件

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

这是我的关键代码：

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

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

我来解答赞 2 收藏

反馈

1 条解答

智玲~ 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