SuperAPI AI 工具集

tanstack-vue-table-with-tanstack-query

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 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/。