SuperAPI AI 工具集

tanstack-vue-table-skilld

编程与开发

查看项目

更新于 10-15 23:56

技能介绍

用途:为编写、迁移或调试导入 @tanstack/vue-table(TanStack Table v9 for Vue)的代码提供技能指引。该包是基于 Vue 3 的 headless 表格适配器,重新导出 @tanstack/table-core 9.2.4 及 Vue 绑定,含 useTable、FlexRender、flexRender、createTableHook。仅针对 v9;使用 useVueTable、getCoreRowModel()、onStateChange 的代码属于 v8,需先迁移。

主要能力:以 tableFeatures 显式注册特性,核心行模型自动提供,无 getCoreRowModel() 选项;行模型槽位需紧随其前置特性注册。API 按特性门控,未注册特性则对应 table.atoms 不存在。状态基于原子(atom),需在模板、computed、watch 或 table.Subscribe 等受跟踪边界内读取。

必要用法:快速开始示例导入 ref、FlexRender、tableFeatures、useTable,定义 features、columns、data,并调用 useTable({ features, columns, data })。数据须以 ref/computed 传入(勿传 data.value),更新时替换数组(.value = [...]),原地 push/splice 不被跟踪。features 与 columns 保持稳定。通过 FlexRender 简写渲染 :cell、:header、:footer。受控状态需配合 on[State]Change 回调解析函数式更新器。同一状态切片只能由内部默认、initialState、外部 atoms 或 state+callback 之一拥有,不可同时使用 atoms 与 state。服务端表格需设置 manual* 选项(如 manualPagination: true)并传 rowCount。createTableHook 可定义应用级默认(features、tableComponents、cellComponents、headerComponents),导出 useAppTable、createAppColumnHelper 与类型化 context hooks。

适用场景:Vue 3 项目中的表格开发与状态管理、从 v8 迁移到 v9、与 TanStack Query(手动分页)及 TanStack Virtual(虚拟化 table.getRowModel().rows)集成。

限制:环境要求 vue >=3.2 为 peer dependency、Node >=20,运行时依赖 @tanstack/store ^0.11.1。stockFeatures 仅宜作为临时审计桥接,不建议生产使用。需在已安装的 node_modules/@tanstack/vue-table/dist/index.d.ts 中核对确切 API,不要凭 v8 记忆重建 v9。包内附带 skills/(getting-started、table-state、migrate-v8-to-v9、create-table-hook、with-tanstack-query、with-tanstack-virtual),并提及 npx @tanstack/intent@latest install 接入编码智能体。