---
name: react-list-table
when: '列表页, 表格, 数据展示, antd Table, 数据列表, 查询列表, 搜索列表, 分页列表, 列表查询'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-react-list-table
asset_kind: pattern
lifecycle_status: active
authority: supporting
routes:
  - '*'
primary_triggers:
  - 列表页
  - 表格
  - 数据展示
  - antd Table
  - 数据列表
  - 查询列表
  - 搜索列表
  - 分页列表
  - 列表查询
priority: P2
specificity: 3
version: 1.0.0
last_reviewed: '2026-05-22'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
status: active
---

## 决策规则
- 必须使用后端分页，禁止前端对全量数据做分页
- 列定义必须独立于页面组件（columns.tsx 或配置对象）
- 删除操作必须有二次确认弹窗
- 搜索触发后必须自动重置到第一页
- 工具栏操作（批量删除、导出）必须有 loading 状态
- 表格数据加载必须使用服务端分页和排序，禁止全量加载前端分页
- 表格必须有 loading 骨架屏和空状态提示，不能只显示空白
- 表格操作列按钮必须有二次确认（删除等危险操作）
- 表格列定义必须抽取为独立配置（columns 数组），禁止写在 JSX 模板中
- 表格行选择和批量操作必须有明确的已选计数和清空功能

## 验收项
- [AC-01] 使用后端分页，前端不缓存全量数据
- [AC-02] 列定义独立于页面组件
- [AC-03] 删除操作有确认弹窗
- [AC-04] 搜索触发后重置到第一页
- [AC-05] 服务端分页排序
- [AC-06] loading/空状态处理
- [AC-07] 危险操作二次确认
- [AC-08] 批量操作有已选计数
