TDesign Vue Next 表格分页数据重复问题分析与解决方案

TDesign Vue Next 表格分页数据重复问题分析与解决方案

问题现象

在使用 TDesign Vue Next 的表格组件(t-table)时，开发者反馈在切换分页时出现了数据重复显示的问题。具体表现为：当从第一页切换到下一页时，表格中显示的数据会出现重复项，而非预期的全新数据。

问题分析

通过分析开发者提供的代码和讨论内容，我们可以发现几个关键点：

1. 开发者最初使用了 reactive 方式定义分页参数，并配合 defaultCurrent 和 defaultPageSize 属性
2. 表格配置了 row-key 属性，确保每行数据有唯一标识
3. 分页切换时通过 change 事件获取新的分页参数并重新请求数据

根本原因

问题的核心在于分页参数的定义方式。在 Vue 3 的响应式系统中，reactive 和 ref 有不同的行为特性：

1. reactive 的限制：当使用 reactive 定义分页对象并配合 default 前缀属性时，表格组件内部可能无法正确响应分页参数的变化
2. 默认参数问题：defaultCurrent 和 defaultPageSize 这些带 default 前缀的属性主要用于初始化，不适合在运行时动态更新

解决方案

经过社区讨论和验证，有以下几种可行的解决方案：

方案一：使用 ref 替代 reactive

const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
});

function onPageChange(pageInfo) {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  // 触发数据重新加载
}

方案二：使用受控分页方式

// 模板中使用
<t-table
  :pagination="pagination"
  @page-change="onPageChange"
/>

// 脚本部分
const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
});

const onPageChange = (pageInfo) => {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  loadData(); // 加载新数据
};

方案三：确保正确的响应式更新

如果坚持使用 reactive，需要确保正确更新整个对象：

const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});

function onPageChange(pageInfo) {
  Object.assign(pagination, {
    current: pageInfo.current,
    pageSize: pageInfo.pageSize
  });
}

最佳实践建议

1. 避免使用 default 前缀属性：在动态分页场景下，建议直接使用 current 和 pageSize 而非 defaultCurrent 和 defaultPageSize
2. 优先使用 ref：对于分页这样的简单对象，使用 ref 通常比 reactive 更不容易出现问题
3. 明确受控/非受控：如果选择受控方式，确保正确处理所有状态更新；如果选择非受控方式，确保初始化参数正确
4. key 的重要性：虽然问题与 row-key 无关，但保持正确的 row-key 设置是表格性能和数据一致性的基础

总结

TDesign Vue Next 表格组件的分页功能在使用时需要注意响应式数据的处理方式。通过采用 ref 替代 reactive、避免使用 default 前缀属性以及明确分页控制方式，可以有效解决分页数据重复的问题。这些解决方案不仅适用于当前问题，也是 Vue 3 组合式 API 开发中的良好实践。