Table 表格
用于以行列表格形式展示结构化数据，支持排序、行选中、多选与加载态，可与分页组件联动。
columns / data 支持 attribute 声明式通道：直接写 JSON 字符串即可渲染表头与数据行（非法 JSON 回退空态），同时保留 property 通道（赋值数组对象，property 优先），可被 SSR 快照序列化。
基础用法（含排序）
可排序列
点击可排列表头在升序 / 降序 / 取消之间循环。
列对齐与宽度
对齐与宽度
受控排序与行选中
初始排序与选中
sort-key / sort-order 控制排序，selected 高亮选中行（点击行可切换选中）。
多选
行多选（checkable）
表头复选框一键全选/取消，行复选框单独勾选；选中变化派发 oas-check。
与分页联动
表格 + 分页
表格数据按每页 5 条切片，翻页时通过 oas-change 事件更新 data 属性重新渲染。
固定列
左侧固定列
左右固定列 + 表头吸顶
列配置中 fixed: 'left' | 'right' 将该列表头与单元格设为 position: sticky（left / right 偏移按列宽自动累加），其余列可横向滚动；表头始终吸顶。
大数据量（虚拟滚动）
万级数据虚拟滚动
设置 height 开启虚拟滚动（搭配 row-height 定高），表格只渲染可见窗口内的行，配合固定列与排序/多选使用；滚动派发 oas-scroll。
斑马纹与边框
斑马纹（stripe）
完整边框（bordered）
设置 stripe 交替奇数/偶数行底色，设置 bordered 为单元格绘制完整网格边框。
合计行
合计行（summary）
summary 属性为 JSON 数组 [{ key, type: 'sum' | 'avg' | 'count', label? }]，表尾渲染合计行：label 显示在首个未聚合列，各聚合值显示在对应列；也支持在列配置上直接写 summary: 'sum' | 'avg' | 'count'。
可展开行
可展开行（expand 字段）
行数据存在非空 expand 字段时，表尾出现展开列，点击行尾按钮展开一整行展示自定义内容；展开状态保存在 expanded 属性（逗号分隔的 key 集合），切换时派发 oas-expand。
受控展开（expanded 属性）
expanded 为受控属性（逗号分隔的 key 集合）：预置展开行在首次渲染即展开，宿主可随时增删 key 驱动展开状态（树形父行与可展开行共用）。
树形数据
树形数据（children）
行数据存在 children 数组时按树形渲染：父行首列出现展开按钮，子行按层级缩进；展开状态同样保存在 expanded 属性，切换时派发 oas-expand。
加载态
加载态
设置 loading 属性后表头保留、数据区显示加载占位行；移除属性即恢复数据。
空态
空数据
自定义空态文案
事件
排序与点击事件
排序：无 · 点击行：—
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
bordered | 完整边框：单元格网格描边（外框由组件自带） | — | — |
checkable | 复选框多选开关 | boolean | — |
columns | 列配置 [{ key, title, sortable?, width?, align?, fixed?, render?, summary? }]，JSON 字符串（attribute 声明式通道；property 赋值优先） | TableColumn[] | string | [] |
data | 行数据 [{ [key]: value, children?, expand? }]，JSON 字符串（attribute 声明式通道；property 赋值优先） | Array<Record<string, unknown>> | string | [] |
empty-text | 空态文案 | — | — |
expanded | 已展开行 key 集合（逗号分隔；树形父行/可展开行共用） | string | — |
height | 虚拟滚动视口高度（px）；设置后仅渲染可见窗口行 + 首尾占位行 | string | 320 |
loading | 加载态：数据区显示加载占位行（表头保留） | boolean | — |
row-height | 虚拟滚动每行固定高度（px） | string | 40 |
row-key | 行唯一键字段 | string | key |
selected | 选中行 key 集合（逗号分隔） | string | — |
sort-key | 受控排序；sort-order 取 asc / desc / 空 | string | — |
sort-order | 受控排序；sort-order 取 asc / desc / 空 | SortOrder | — |
stripe | 斑马纹：奇数/偶数行交替浅底色 | boolean | — |
summary | 合计配置 [{ key, type: 'sum'|'avg'|'count', label? }]，JSON 字符串 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-check | 复选框选中变化，detail: { keys: string[] } |
oas-expand | 行展开/收起（树形子行或可展开内容行），detail: { key, expanded } |
oas-row-click | 点击行（非 checkable 时同时切换选中），detail: { row, key } |
oas-scroll | 虚拟滚动滚动事件（rAF 节流），detail: { scrollTop, start, end } |
oas-sort-change | 排序变化，detail: { key, order: 'asc' | 'desc' | '' } |
说明：
columns.render为函数类型，仅支持在 JS 侧构造后通过属性整体赋值，无法用 JSON 字符串表达；fixed列建议显式声明width（未声明时按 100px 兜底计算 sticky 偏移）。合计也可在列上直接写summary: 'sum' | 'avg' | 'count'；children（树形子行）与expand（可展开行内容）均为行数据字段。
加载占位行部件为 ::part(loading-row)，合计行 ::part(summary-row)、展开内容行 ::part(expand-row)，均可单独定制样式。