用途:在 Vue 项目中组合 @tanstack/vue-table 与 @tanstack/vue-query,实现服务端分页表格。先区分客户端与服务端各自负责的处理阶段。
主要能力:用 Vue Query 的选项函数保持查询依赖响应式;把查询结果以 computed 暴露给表格;通过 manualPagination 与 rowCount 让表格使用服务端返回的总行数。
用法要点:在 useQuery 的选项函数内读取 ref,如 queryKey: ['people', pagination.value.pageIndex, pagination.value.pageSize];用 computed(() => query.data.value?.rows ?? []) 提供数据;useTable 传入 features、columns、data、rowCount、manualPagination: true、state 与 onPaginationChange。
常见错误:在构造查询前解包 ref,导致依赖丢失;用 ref 一次性复制查询数据,造成与缓存结果漂移;省略 rowCount,使表格无法得知服务端总页数。
限制:资料未提供安装命令、版本要求、收费信息与完整示例,具体选项类型需查看已安装的 @tanstack/vue-table/dist/useTable.d.ts 与 @tanstack/vue-query/dist/。