项目正在快速迭代中，API 与视觉细节可能随版本调整，请勿用于生产环境。
仅桌面端保证样式

Table 表格 ​

表格组件：列由 eb-table-column 声明并注册到父表格（列组件自身不渲染 DOM），内置客户端排序、列筛选、多选 / 单选、展开行、固定列（sticky）、横向滚动、当前行高亮与空态，并支持表尾合计、加载遮罩与服务端排序，选中可经 v-model 受控，暴露排序、筛选、选中、展开等实例方法。

基础用法 ​

data 传入行数组，eb-table-column 用 prop 绑定字段、label 定义表头；border 与 stripe 开启边框和斑马纹，sortable 让金额列出现排序箭头（点击循环升序、降序、取消）。斑马纹加在偶数行（自第 2 行起）；组件始终开启行 hover 高亮，普通行 hover 时整行变浅灰，斑马行因底色规则声明在后、hover 仍保持斑马底色，两层不互相覆盖。数据密集的列表页推荐 stripe + border 组合，行间辨识度最高。

树形表格 ​

数据行带 children 数组即自动启用树形渲染：首列显示展开箭头与层级缩进，点击箭头或调用行展开；default-expand-all 默认展开全部，tree-props 可自定义 children 字段名。

插槽列自定义单元格 ​

在列内写 #default 作用域插槽即可完全接管单元格（scope 含 row、$index、column）；show-overflow-tooltip 让超宽文本省略并以 title 提示全文。

排序与格式化 ​

default-sort 指定初始排序（立即生效，非仅高亮箭头）；sort-method 提供自定义比较函数（返回值自动乘以排序方向），sort-change 返回 { prop, order, column } 用于对接后端；formatter 把原始值格式化为展示文本。

当前排序：amount descending

服务端排序 ​

列设 sortable="custom" 后点击箭头不在本地重排，只触发 sort-change 携带目标排序，由页面请求或重排数据后再传入；箭头状态仍在本地维护，适合分页与大数据量场景。本例在事件回调里模拟服务端返回。

服务端返回顺序：华北仓、华南仓、华东仓

横向滚动 ​

scroll-x 声明表格总宽（数字按 px，也可传 max-content 由内容撑开）：列宽合计超出容器时表体出现横向滚动条，表头随之同步偏移，fixed 列保持吸附；列声明了 min-width 时按该宽度保底、不被压缩。未传时列宽自适应容器，行为不变。

多选 ​

type="selection" 声明多选列，表头出现全选框（含半选态）；selectable 可禁用指定行（本例仅已支付行可选）。选中项通过 selection-change 同步，也可用 v-model:selection 受控（传行数组回填，翻页后按 rowKey 回显），或用实例方法 clearSelection 清空。

已选 0 项：—

单选 ​

selection-type="radio" 把选择列换成单选框：选中即唯一值，重复点击不变更，表头不再渲染全选框。此时受控值 v-model:selection 为单个 key（需配合 row-key，未选中为 null；传行对象或单元素数组也可回显），selection-change 仍发单元素数组。

当前选中 key：—

展开行 ​

type="expand" 声明展开列，默认插槽渲染在展开的附加行中（scope 为 { row, $index }）；配合 default-expand-all 或 expand-row-keys（需 rowKey）可默认展开。展开态变化统一经 expand-change 上报 (expandedKeys, row, expanded)：expandedKeys 为当前全部展开 key（设 rowKey 时为业务 key），平铺展开列与树形行共用同一签名。

空态 ​

数据为空时渲染空态区域，默认文案为内置国际化「暂无数据」，可用 empty-text 修改，或用 #empty 插槽整体替换（可搭配 eb-empty）。

没有匹配的订单

加载中 ​

loading 为真时表体覆盖半透明遮罩并显示旋转指示，阻断数据区交互；适合远程拉取数据期间开启、结束后关闭。遮罩只盖住表体（含表尾合计），表头保持可见。

虚拟滚动 ​

virtual 开启后万级行只渲染可视窗口，表头 / 列宽 / 固定列 / 多选 / 键盘导航全量保留。需配合 height 或 maxHeight 形成滚动视口；row-height 需与实际行高一致（受 size 与内容换行影响时显式对齐）。展开行与树形层级不参与虚拟模式。

500 行数据，滚动手感与全量渲染一致

行内编辑 ​

列设置 editable 后，单元格点击进入编辑：Enter 或失焦提交、Esc 取消；提交时更新行数据并触发 cell-change（携带 row / prop / value / oldValue / $index），在其中做校验或落库。需要复杂编辑器（选择器、日期等）时用 default 插槽自行承载，插槽列不受 editable 影响。

点击「库存」单元格直接改数
最近一次提交：—

API ​

Table Props

参数说明类型默认值
data表格数据array[]
height固定高度，表体区域内滚动string | number—
maxHeight最大高度，超出后表体滚动string | number—
scrollX横向滚动总宽，数字按 px，也可传 max-content 由内容撑开；列宽合计超出容器时表体横向滚动、表头同步偏移，fixed 列照常吸附，minWidth 列按声明保底number | string—
border边框模式booleanfalse
stripe斑马纹booleanfalse
loading表体加载遮罩，远程取数期间开启并阻断数据区交互booleanfalse
size尺寸，缺省继承表单上下文large | default | small
fit列宽自适应容器（minWidth 列参与拉伸）booleantrue
showHeader是否渲染表头（当前版本始终渲染表头）booleantrue
highlightCurrentRow点击行时高亮并触发 current-changebooleanfalse
rowKey行键，字段名或 (row) => keystring | function—
rowClassName行附加类名，函数按行数据返回，也可直接传字符串(row, index) => string | string
defaultExpandAll / expandRowKeys默认展开全部 expand 行 / 指定默认展开行的 key 数组（需设置 rowKey）；expandRowKeys 仅初始化生效，动态展开用实例方法 toggleRowExpansionboolean / arrayfalse / []
defaultSort初始排序 { prop, order }，order 为 ascending / descendingobject{ prop: '', order: '' }
selectOnIndeterminate预留参数（当前未参与全选逻辑）booleantrue
selection (v-model:selection)选中受控：checkbox 模式为行数组（回填元素可为 key，需 rowKey），radio 模式为单个 key（未选中为 null，兼容行对象或单元素数组回显）；内部变更同步 emit update:selection，不传则组件内部自持array / key—
selectionType选择模式：checkbox 多选（表头全选）/ radio 单选（选中即唯一值，表头无全选框）checkbox | radiocheckbox
emptyText空数据文案，优先级低于 empty 插槽string
showSummary / summaryMethod表尾合计行；summaryMethod 缺省对全数字列求和、其余列为空，传入时接收当前（排序/筛选后）数据数组并返回以列 prop 为键的文本映射boolean / functionfalse
virtual虚拟滚动，万级行只渲染可视窗口（需配合 height / maxHeight；展开行与树形层级不参与）booleanfalse
rowHeight虚拟模式行高，需与实际行高一致number48

Table Events

参数说明类型默认值
select手动勾选某一行(selection, row) => void—
select-all点击表头全选框(selection) => void—
selection-change选中项变化（radio 单选模式同样发单元素数组或空数组；受控时同时 emit update:selection，checkbox 发数组、radio 发单 key 或 null）(selection) => void—
cell-click单元格点击(row, prop, value, event) => void—
row-click行点击（开启 highlightCurrentRow 时同时更新当前行）(row, index, event) => void—
row-dblclick / row-contextmenu行双击 / 行右键(row, index, event) => void—
sort-change排序变化（含 custom 服务端排序），order 为 ascending / descending / null({ prop, order, column }) => void—
filter-change筛选应用或重置，参数为以列 id 为键的选中值映射(activeFilters) => void—
expand-change展开态变化（平铺展开列与树形行统一载荷；expandedKeys 为当前全部展开 key，设 rowKey 时为业务 key，树形未命中保留路径 key，未设 rowKey 时为行引用）(expandedKeys, row, expanded) => void—
current-change当前行变化(currentRow, prevRow) => void—
header-click表头单元格点击(column, event) => void—
cell-change行内编辑提交（值有变化时触发，行数据已同步更新）({ row, prop, value, oldValue, $index }) => void—

Table Slots

参数说明类型默认值
defaulteb-table-column 列定义——
empty空数据区域（替换 emptyText）——

Table Methods（defineExpose）

参数说明类型默认值
sort / clearSort程序化排序 / 清空排序状态(prop, order) => void / () => void—
toggleRowSelection勾选 / 取消某行，selected 缺省时取反(row, selected?) => void—
toggleAllSelection切换全选() => void—
clearSelection / clearFilter清空所有选中 / 清空筛选（缺省清全部，可传列 key 数组）() => void / (columnKeys?) => void—
toggleRowExpansion展开 / 收起行，expanded 缺省时取反(row, expanded?) => void—
setCurrentRow设置当前行（配合 highlightCurrentRow）(row) => void—
doLayout重新布局（sticky 布局自适应，保留兼容）() => Promise—
getSelection获取当前选中行数组() => array—
ref根 DOM 元素HTMLElement—

TableColumn Props

参数说明类型默认值
type特殊列类型：selection 多选 / expand 展开 / index 序号selection | expand | index—
prop字段名（同时作为列 id 与筛选、排序默认依据）string
label列标题string
width / minWidth固定列宽 / 最小列宽（fit 模式下 minWidth 参与拉伸）string | number—
fixed固定列（position: sticky 实现）boolean | left | rightfalse
sortable开启排序；设为 custom 时不做本地排序，仅触发 sort-change 由服务端排序boolean | stringfalse
sortMethod自定义比较函数，返回值自动乘以排序方向(a, b) => numbernull
sortBy排序取值来源，字段名、字段数组或取值函数string | array | (row) => any—
sortOrders点击循环的排序序列array['ascending', 'descending', null]
filters列筛选项 [{ text, value }]，配置后表头出现筛选图标array[]
filterMethod筛选方法（必须提供才会参与过滤）(value, row, column) => booleannull
filterMultiple筛选项是否可多选booleantrue
columnKey列唯一键，同 prop 多列或 clearFilter 定位时使用string—
align内容对齐left | center | rightleft
headerAlign表头对齐，缺省跟随 alignleft | center | right—
showOverflowTooltip单元格超宽省略并以 title 提示全文boolean | objectfalse
formatter展示文本格式化(row, column, value, index) => stringnull
className / labelClassName单元格 / 表头单元格类名string
selectableselection 列的行可选判断，返回 false 禁用该行(row, index) => booleannull
indexindex 列序号，数字为起始号，函数自定义number | (index) => number—
editable行内编辑：点击单元格进入编辑，Enter / 失焦提交、Esc 取消（default 插槽列不受影响）booleanfalse

TableColumn Slots

参数说明类型默认值
default自定义单元格；type=expand 时为展开行内容scope: { row, $index, column }—
header自定义表头scope: { column, $index }—