Table 表格
展示结构化数据，覆盖列渲染、排序、过滤、行选择、固定列、展开行和合并单元格等高频能力。
Basic
模板式列声明
通过 <c-table-column> 子组件声明列，替代 columns 数组写法；用 <c-table-column-group> 把多列合并到一个表头分组（thead 双行）；用 <c-table-summary> 在 <tfoot> 渲染汇总行。三者都是平铺顶层组件，与 :columns 数组互斥（数组非空时优先）。
自定义单元格渲染
三种写法：列上 customRender 函数 / 全局 #body-cell slot（按 column.key 区分） / 全局 #header-cell slot（自定义表头标签）。函数式与 slot 同时存在时 slot 优先。
树形数据
dataSource 中的行通过 children 字段携带子节点即自动展开为树（默认字段名 children，可通过 childrenColumnName 改）；indentSize 控制每层缩进像素，默认 15。
Sort And Filter
固定列
通过 column.fixed = 'left' | 'right' 把列吸附在左右两侧；为固定列指定 width（数值或带 px 的字符串）方可正确计算粘性偏移。当存在任意左固定列时，行选择列与展开图标列会自动跟随固定到左侧。
展开行
通过 expandable.expandedRowRender 渲染展开内容；支持 expandedRowKeys 受控、defaultExpandAllRows、rowExpandable 和 expandRowByClick。
合并单元格
通过 column.onCell 为单元格返回 rowSpan / colSpan，被覆盖的单元格返回 0 即可。column.onHeaderCell 同样支持表头的合并。
Row Selection
单选 + 选中行实时统计
rowSelection.type = 'radio' 把多选改成单选。配合 getCheckboxProps 可禁用特定行；onSelect 在每次勾选时回传当前行 + 全部选中行，便于做实时汇总。
loading / size / showHeader
loading=true 显示遮罩；size 三档紧凑度（small / middle / default）；showHeader=false 隐藏表头变成卡片化数据列表。
自定义空态
#empty slot 接管「无数据」占位区，常用于「未筛选到结果」与「真的没数据」分文案，或在空态嵌入引导按钮。
change 事件全量追踪
@change 在过滤 / 排序任意一项变化时触发，回调签名 (filters, sorter, currentData)。业务侧最常用于埋点 / 后端 API 联动 / 持久化筛选状态。
参数
Table
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| columns | TableColumn[] | [] | 列配置（与子组件 <c-table-column> 互斥；数组优先） |
| dataSource | any[] | [] | 行数据 |
| rowKey | string / (record, index) => string | 'key' | 行唯一标识 |
| bordered | boolean | false | 是否带边框 |
| loading | boolean | false | 是否显示加载遮罩 |
| showHeader | boolean | true | 是否显示表头 |
| size | 'small' / 'middle' / 'default' | 'default' | 紧凑度 |
| rowSelection | TableRowSelection | -- | 行选择配置 |
| expandable | TableExpandable | -- | 展开行配置 |
| scroll | -- | 横/纵向滚动；横向滚动通常配合 fixed 使用 | |
| childrenColumnName | string | 'children' | 树形数据子节点字段名 |
| indentSize | number | 15 | 树形数据每层缩进 px |
Slots
| 名称 | 作用域 | 说明 |
|---|---|---|
| default | -- | 模板式列声明容器，放 <c-table-column> 等子组件 |
| body-cell | { text, record, index, column } | 单元格统一自定义渲染，按 column.key 区分列 |
| header-cell | { column, index } | 表头单元格统一自定义渲染 |
| empty | -- | 空数据占位 |
TableColumn
| 字段 | 类型 | 说明 |
|---|---|---|
| title | string | 表头标题 |
| dataIndex | string / Array<string | number> |
| key | string | 列唯一标识 |
| width | string / number | 列宽（固定列必须给数值） |
| align | 'left' / 'center' / 'right' | 对齐方式 |
| fixed | 'left' / 'right' | 固定列方向 |
| sorter | boolean / (a, b) => number | 排序 |
| sortOrder | 'ascend' / 'descend' / null | 受控排序顺序 |
| filters | TableFilterOption[] | 过滤项 |
| filteredValue | TableFilterValue[] | 受控过滤值 |
| filterMultiple | boolean | 是否多选过滤 |
| customRender | (scope) => VNodeChild | 单元格自定义渲染 |
| onCell | (record, index) => | 合并单元格 / 单元格属性扩展 |
| onHeaderCell | (column) => | 表头单元格属性扩展 |
| children | TableColumn[] | 子列（仅 ColumnGroup 生成） |
TableRowSelection
| 字段 | 类型 | 说明 |
|---|---|---|
| type | 'checkbox' / 'radio' | 选择方式，默认多选 |
| selectedRowKeys | (string | number)[] |
| defaultSelectedRowKeys | (string | number)[] |
| columnWidth | string / number | 选择列宽 |
| hideSelectAll | boolean | 是否隐藏「全选」表头复选框 |
| fixed | boolean | 是否固定到左侧（有 left fixed 列时自动跟随） |
| getCheckboxProps | (record) => | 单行复选框属性扩展，最常用于禁用特定行 |
| onChange | (selectedRowKeys, selectedRows) => void | 选中变化回调 |
| onSelect | (record, selected, selectedRows) => void | 单行勾选变化 |
| onSelectAll | (selected, selectedRows, changedRows) => void | 表头全选 / 反选 |
TableExpandable
| 字段 | 类型 | 说明 |
|---|---|---|
| expandedRowKeys | TableSelectionKey[] | 受控展开行 key |
| defaultExpandedRowKeys | TableSelectionKey[] | 非受控初始展开 |
| defaultExpandAllRows | boolean | 是否默认全部展开 |
| expandedRowRender | (record, index) => VNodeChild | 展开行内容 |
| rowExpandable | (record) => boolean | 行是否可展开 |
| columnWidth | string / number | 展开图标列宽，默认 48 |
| fixed | boolean | 是否固定展开图标列到左侧 |
| expandRowByClick | boolean | 是否点击行触发展开 |
| onExpand | (expanded, record) => void | 单行展开/收起回调 |
| onChange | (expandedRowKeys) => void | 展开 key 集合变化回调 |
TableColumn（子组件 <c-table-column>）
与上表 TableColumn 字段一一对应，作为子组件 props 时命名调整：key → column-key（避开 Vue 保留属性）；children 由嵌入的 <c-table-column> 子组件自动收集，不需手写。
| Slots | 作用域 | 说明 |
|---|---|---|
| customRender | { text, record, index, column } | 列内单元格自定义渲染（slot 优先于 customRender prop） |
TableColumnGroup（子组件 <c-table-column-group>）
| 参数 | 类型 | 说明 |
|---|---|---|
| title | string | 分组表头标题 |
| align | 'left' / 'center' / 'right' | 分组表头对齐 |
| fixed | 'left' / 'right' | 整组固定列方向 |
| onHeaderCell | (column) => TableCellRenderProps | 表头单元格属性扩展 |
默认 slot 放 <c-table-column> 子列；子列在 tbody 中被展平渲染，在 thead 表现为「分组标题 + 子列标题」双行结构。
TableSummary（子组件 <c-table-summary>）
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fixed | boolean / 'top' / 'bottom' | false | 汇总行是否贴底/贴顶（依赖容器 scroll.y） |
默认 slot 直接写 <tr><td>...</td></tr>，Table 渲染到 <tfoot>。
事件
| 事件 | 说明 |
|---|---|
| change | (filters, sorter, currentData) |
| update:filters | 过滤变化 |
| update:sorter | 排序变化 |
| update:selectedRowKeys | 行选择变化 |
| update:expandedRowKeys | 展开行变化 |
| expand | (expanded, record) — 单行展开/收起 |