ant design table 分页参数需转为 gorm offset=(current-1)*pagesize 和 limit=pagesize，后端用结构体绑定 current/pagesize 并校验 pagesize 上限；必须分别执行 count 获取 total 和 find 查询数据，避免复用 db 实例；前端 pagination 需显式传入 current、pagesize、total，并与搜索条件一同提交。
分页参数怎么从 Ant Design Table 传到 GORM 查询里
Ant Design 的 Table 组件默认通过 onChange 回调传入 { current, pageSize }，这两个值必须原样转成 GORM 的 Offset 和 Limit。注意：GORM 的 Offset 是从 0 开始，而 Ant Design 的 current 是从 1 开始，不转换会跳过第一页数据。
Offset = (current - 1) * pageSizeLimit = pageSize- 后端接收时建议用结构体绑定，字段名保持为
Current和PageSize，避免用Page或Size等歧义名 - 务必对
pageSize做上限校验（比如最大 100），防止恶意请求拖垮数据库
GORM 分页查询必须加 Count 获取总条数
Ant Design Table 的分页控件需要 total 属性才能正确渲染页码，而 GORM 的 Limit/Offset 不会自动返回总数。如果只查数据不查总数，前端页码会显示不全或无法跳转到最后页。
- 先用
Session().Model(&User{}).Count(&total)获取总数（注意传指针） - 再用相同条件链式调用
Limit().Offset().Find(&users)查数据 - 不要复用同一个
gorm.DB实例做Count和Find—— 条件语句可能被意外复用或清空，建议拆成两个独立查询 - 如果用了
Joins或Preload，Count可能不准，此时应改用子查询或手动写SELECT COUNT(*)
前端 Table 的 pagination 配置要匹配后端实际返回
Ant Design Table 的 pagination 对象必须显式传入 current、pageSize、total，不能依赖组件自动推断。否则页码按钮不响应、当前页高亮错位、或者“共 X 条”显示为 0。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 后端响应 JSON 必须包含
data: [...]、pagination: { current, pageSize, total }字段，结构要和前端预期一致 - 前端设置
pagination={{ ...response.pagination, onChange: handlePageChange }}，确保翻页时能回传正确current和pageSize - 如果后端没返回
current，前端会默认从 1 开始，但用户点击第 3 页后刷新页面，又回到第 1 页 —— 所以current必须由后端原样反射回来
带搜索/筛选条件时，分页参数和查询条件必须同时传递
一旦在表格上方加了 Input.Search 或 Select，用户操作就变成「条件 + 分页」联合查询。常见错误是只把分页参数塞进 URL 查询字符串，而把搜索关键词存在 React state 里没传给后端，导致翻页后条件丢失。
- 所有筛选字段（如
name,status）应和current/pageSize一起作为 query 参数发请求，例如：/api/users?name=foo&status=active¤t=2&pageSize=20 - GORM 构建查询时，先拼接 where 条件（
Where("name LIKE ?", "%"+name+"%")），再链式加Count和Find - 注意 SQL 注入风险：不要用字符串拼接字段名，
status这类枚举值建议白名单校验后再进Where
分页本身不复杂，但前后端对「当前页」「总数」「条件一致性」这三点的约定稍有偏差，就会导致页码错乱、数据重复或缺失。尤其当加入排序（Order）或关联查询后，Count 和 Find 的执行计划可能完全不同，这时得靠 EXPLAIN 看实际 SQL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
