---
url: /components/data-table.md
---
# DataTable 数据表格

> 移动端：宽表格在触屏转译为卡片列表，参见 [移动端 · 数据展示](/mobile/data-display)。

CRUD 场景的表格封装：工具栏（标题 + 计数角标 + 操作区）、`columns` 配置式列、内置分页与加载遮罩，基于 EbTable 并透传其实例方法。

## 基础用法

## 多选与操作列

`selectable` 打开多选列并 emit `selection-change`；`show-index` 打开序号列（宽度由 `index-width` 控制）。`operations` 插槽渲染操作列，作用域为 `{ row, $index, column }`，列头文案与宽度用 `operations-label / operations-width` 调整。

## 插槽列与加载态

列配置 `slot: 'status'` 后由同名插槽渲染单元格（省略时默认按 `prop` 名查找插槽，作用域 `{ row, $index, column }`）；`loading` 时表格覆盖旋转遮罩，适合包裹请求过程。

## 双行单元格

列配置 `stack: (row) => 副行文本` 即可在单元格内渲染主行加粗 + 副行浅灰省略（等价于内置 EbCellStack）。

## 服务端分页

`page / pageSize` 受控 + `total` 驱动分页条；翻页时组件先 emit `update:page / update:pageSize`，再 emit `page-change`，在回调里按新页码重新拉取数据即可。

## 撑满剩余空间

`fit` 打开后组件按 flex 布局占满父容器的剩余高度，实测表格区高度后表格内部滚动，工具栏与分页常驻可视区——需要父链为 flex column 或有确定高度；与 `virtual` 组合即可承载万级数据的满屏表格。整页级封装（页头 + 查询区 + 工具栏 + 表格分页联动）见 [TablePage 表格页](/components/table-page)。

## API