仅桌面端保证样式
DataTable 数据表格
移动端：宽表格在触屏转译为卡片列表，参见 移动端 · 数据展示。
CRUD 场景的表格封装：工具栏（标题 + 计数角标 + 操作区）、columns 配置式列、内置分页与加载遮罩，基于 EbTable 并透传其实例方法。
基础用法
共 120 条
10
- 1
- 2
- 3
- 4
- 5
- 6
- 12
多选与操作列
selectable 打开多选列并 emit selection-change；show-index 打开序号列（宽度由 index-width 控制）。operations 插槽渲染操作列，作用域为 { row, $index, column }，列头文案与宽度用 operations-label / operations-width 调整。
共 0 条
10
- 1
已选 0 行
插槽列与加载态
列配置 slot: 'status' 后由同名插槽渲染单元格（省略时默认按 prop 名查找插槽，作用域 { row, $index, column }）；loading 时表格覆盖旋转遮罩，适合包裹请求过程。
共 0 条
10
- 1
双行单元格
列配置 stack: (row) => 副行文本 即可在单元格内渲染主行加粗 + 副行浅灰省略（等价于内置 EbCellStack）。
服务端分页
page / pageSize 受控 + total 驱动分页条；翻页时组件先 emit update:page / update:pageSize，再 emit page-change，在回调里按新页码重新拉取数据即可。
共 23 条
10
- 1
- 2
- 3
第 1 页，每页 10 条
撑满剩余空间
fit 打开后组件按 flex 布局占满父容器的剩余高度，实测表格区高度后表格内部滚动，工具栏与分页常驻可视区——需要父链为 flex column 或有确定高度；与 virtual 组合即可承载万级数据的满屏表格。整页级封装（页头 + 查询区 + 工具栏 + 表格分页联动）见 TablePage 表格页。
API
DataTable Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | array | [] |
| columns | 列配置 | Column[] | [] |
| title | 工具栏标题 | string | |
| showTotal | 是否显示计数角标（total > 0 时） | boolean | true |
| loading | 加载态（表格遮罩） | boolean | false |
| selectable | 显示多选列 | boolean | false |
| showIndex | 显示序号列 | boolean | false |
| indexWidth | 序号列宽度 | number | string | 56 |
| operationsLabel / operationsWidth | 操作列标题 / 宽度 | string / number | 操作 / — |
| operationsFixed | 操作列固定方向 | boolean | string | right |
| page / pageSize | 分页受控 | number | 1 / 10 |
| total | 总条数（计数角标与分页） | number | 0 |
| pageSizes | 每页条数选项 | number[] | [10, 20, 50, 100] |
| paginationLayout | 分页条布局项 | string | total, sizes, prev, pager, next |
| showPagination | 是否显示分页条 | boolean | true |
| fit | 高度自适应：撑满 flex 父容器剩余空间，实测高度写入表格并内部滚动（与 tableAttrs.height 同传时 fit 优先） | boolean | false |
| tableAttrs | 透传 EbTable 其余 props（border/stripe/height 等） | object | {} |
Column
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prop | 字段名 | string | — |
| label | 列标题 | string | |
| width / minWidth | 列宽 | number | string | — |
| fixed | 固定列 | boolean | string | false |
| sortable | 可排序 | boolean | false |
| align | 对齐 | left | center | right | left |
| showOverflowTooltip | 超出省略并悬浮显示完整内容 | boolean | true |
| slot | 自定义单元格插槽名（缺省用 prop 名） | string | — |
| stack | 双行单元格副行取值函数 | (row) => string | — |
| editable | 行内编辑：点击单元格进入编辑，Enter / 失焦提交、Esc 取消（配置 slot / stack 的列不生效） | boolean | false |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| toolbar | 工具栏右侧操作区 | — | — |
| operations | 操作列内容，作用域 { row, $index, column } | — | — |
| col.slot 或 col.prop | 列内容插槽，作用域 { row, $index, column } | — | — |
| empty | 空数据占位内容 | — | — |
Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| page-change | 页码或每页条数变化 | ({ page, pageSize }) => void | — |
| update:page / update:pageSize | 分页受控更新 | (n: number) => void | — |
| selection-change | 多选项变化 | (rows) => void | — |
| sort-change | 排序变化 | (e) => void | — |
| row-click | 行点击 | (e) => void | — |
| cell-click | 单元格点击 | (e) => void | — |
| cell-change | 行内编辑提交（editable 列，值有变化时触发） | ({ row, prop, value, oldValue, $index }) => void | — |
Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| clearSelection | 清空多选 | () => void | — |
| toggleRowSelection | 切换行选中 | (row, selected?) => void | — |
| toggleAllSelection | 切换全选 | () => void | — |
| sort | 程序化排序 | (prop, order) => void | — |
| clearSort | 清空排序状态 | () => void | — |
| tableRef | EbTable 实例引用（可调用其全部方法） | Ref | — |