Table 表格

基本使用：columns 定义列、data-source 提供数据；bodyCell 插槽自定义单元格渲染。

bordered 展示表格内外边框。

size="middle" | "small" 两种紧凑形态。

#expandedRow 插槽 自定义展开内容；defaultExpandAllRows 默认全部展开。

row-selection 开启勾选列；v-model 形态用 selectedRowKeys 受控。

勾选列 + 操作列的组合：getCheckboxProps 按行禁用勾选，工具栏按钮读 selectedRowKeys 做批量操作； 选中行随数据删除同步清理，避免出现指向已删行的残留 key。

窄屏使用 scroll.x 保留完整列宽，横向滚动可访问操作列；键盘聚焦 Delete 时也会将按钮滚入视口。

row-selection.type="radio" 单选列。

数据带 children 字段即自动成为树形表格（childrenColumnName 可换字段名）。

列上声明 sorter 即开启排序（三态循环）；defaultSortOrder 指定默认排序。 多重排序用 sorter: { compare, multiple: n }。

sorter 的对象形态带 multiple 权重：数字越小优先级越高，多列同时排序按权重依次比较。 onChange 的第三个参数在多列激活时是数组。

列上声明 filters + onFilter 开启筛选下拉；filterMultiple 控制多选/单选； filteredValue 受控。

列上 filterSearch 打开筛选下拉里的搜索框：true 按 value 直接匹配， 函数形态可自定义比对逻辑（第二参是筛选项 { text, value }）。

列上 filterDropdown 完全接管筛选面板（拿到 setSelectedKeys / confirm / clearFilters 三件套）， 配合 onFilter 做本地过滤、filterIcon 自定义漏斗图标的高亮态。

scroll.y 给表体一个固定高度 ⇒ 表头吸顶、表体独立滚动。列宽建议显式声明， 否则表头与表体的列宽会各自按内容计算、滚动时对不齐。

列声明 fixed: 'left' | 'right' 固定列；横向内容超出时（scroll.x）固定列吸边并带阴影。

scroll 同时给 x 与 y：横向由 fixed: 'left' | 'right' 的列吸边，纵向表头吸顶。 固定列与滚动列的交界处会自动带阴影。

列的 children 即多级表头（可嵌套任意层）；带 children 的列只做分组、不渲染单元格。 分组表头同样支持 fixed 与 filters / sorter。

单元格合并靠列的 onCell：返回 { colSpan } 跨列、{ rowSpan } 跨行。 ⚠️ 被跨掉的格子必须显式返回 0，否则后面的列会整体错位 —— 合并是「按格算」而不是「按列算」。

第二行的 Age 跨两列，覆盖返回 colSpan: 0 的 Home phone；Name 分别跨前三行和后两行，后两行的 Home phone 也纵向合并。

使用 #summary 插槽与 Summary、TableSummaryRow、TableSummaryCell 命名组件渲染表尾汇总，通过 colSpan 合并列。命名组件也适用于模板自动引入。

emptyText 覆盖空数据时的占位内容（VNode 或返回 VNode 的函数）。 需要跟页面其它空态保持一致时用它，而不是改全局 locale。

列上 ellipsis 让超出列宽的内容单行省略。⚠️ 它依赖确定的列宽 —— 不给 width 时浏览器无从判断「超出」，省略不会生效。

服务端分页的标准形态：pagination 受控（current / pageSize / total 都来自响应）， 翻页在 change 里重新拉数据，loading 覆盖请求期。 示例用一个本地假接口代替真实请求 —— 保持离线可跑、结果确定。

sticky 让表头随页面滚动吸顶（区别于 scroll.y —— 那个是表体自己滚、表头不动）。 sticky 传对象时可指定 { offsetHeader, offsetScroll, getContainer }。

virtual 开启虚拟滚动（大表格场景）：表体交给 @apollo-design/virtual-list，只渲染视口内的行。 scroll.y 给视口高度、scroll.x 给内容宽度 —— virtual 下二者必须是数值（否则按 1 / 500 兜底并告警）。

通过已有 onRow、列 onHeaderCell 接入浏览器原生拖放事件，拖动后更新受控 dataSource / columns 顺序，不依赖 React 或第三方拖拽运行时。行与列分别拖放；按钮提供可用键盘操作的同等调整方式，并支持重置。这是消费端组合示例，Table 没有新增内建拖拽 prop。

使用 column 为全部列提供公共默认值，切换 align 可观察它只作用于未显式声明对齐方式的列。

在列 render 中渲染 Input 与 InputNumber，直接修改本地数据并统计编辑次数，支持一键重置。

通过 childrenColumnName="subRows" 指定树形字段，并用 expandable.expandedRowKeys 受控展开，按钮可全部展开或收起。

结合 filterMode="tree"、嵌套 filters 与 filterSearch 搜索分类，@change 会实时展示当前选中的筛选值。

在固定高度的滚动容器内使用 sticky，滚动时表头吸附在容器顶部，按钮可快速验证吸顶效果。

使用 pagination.placement 同时在上方与下方渲染分页器，可切换位置并实时同步当前页码。

Table 的 Component Token 以 --apollo-table-* CSS 变量输出；在容器上覆盖表头、行悬停、单元格内边距等变量即可定制，切换下拉框可对比默认与自定义主题。

通过开关与下拉框实时切换 bordered、loading、showHeader、rowHoverable 与 size，表格上方的标签会同步显示当前配置。

点击「编辑本行」后整行切换为表单控件，可修改姓名、年龄与部门；保存后写回本地数据，取消则丢弃草稿并显示当前编辑状态。

列设置 ellipsis: { showTitle: false } 关闭原生 title，再在 render 中用 Tooltip 展示完整内容；切换下拉框可实时改变浮层方位。

在可滚动容器中同时启用 sticky 表头与 #expandedRow 插槽，滚动时表头保持吸附，展开行仍可独立控制。

title 接收渲染函数，可放置标题、数量和刷新按钮；footer 提供表格底部内容，排序与筛选变化会同步显示在页面上方。

列的 hidden 属性会在保留列定义的同时移除表头与单元格，开关可实时切换 Age、City 和 Email 列并显示可见列数量。

#expandedRow 插槽 返回另一个 Table，展示每位客户的最近订单；按钮可展开或收起全部父行，子表格使用独立列与本地数据。

受控 pagination 配置每页条数、快速跳页与总数展示；翻页或在每页条数下拉框中切换后，页面标签会同步当前页码与页大小。

筛选状态通过列上的 filteredValue 受控；点击「重置筛选」把两列的受控值置为 null，表格数据与筛选图标同步恢复，页面标签记录当前条件。

通过 rowSelection.selections 提供「全选所有行」「清空选择」「仅选择偶数年龄」三个自定义菜单项，并保留禁用行；页面会显示当前选择与最近一次选择方式。

用 classNames 给根、标题、表头、表体与底部挂语义类名，用 styles 注入内联样式；切换 Blue / Warm 会同步改变边框、表头与行背景。

树形数据配合固定列宽与 ellipsis：层级缩进和展开图标保留，超长名称与描述被截断并保留原生 title；按钮可展开或收起根节点。