HeadlessTable ​

无渲染的表格核心组件,通过默认插槽暴露完整的列/行/渲染上下文,可与任意 UI 框架(Element Plus、Vxe-Table 等)组合使用。配套 useHeadlessTable composable 提供排序、筛选、分页和行选择状态管理。

使用
反馈
文档

与 Element Plus 集成 ​

编辑模式 ​

mode prop 只控制整个表格,默认值为 default。组件实例 API 还可以通过稳定行标识切换整表、单行或单元格;解析优先级为:单元格、行、整表 API、mode prop、default。

行和单元格 API 需要 getRowId 提供稳定行标识,列标识使用 column.id,未提供时回退到 field。setMode、setRowMode、setCellMode、单项/批量 clear*、getRowMode、getCellMode 方法也会暴露在默认插槽作用域中。clearAllCellModes 仅清除单元格 override,clearAllRowModes 仅清除行 override,clearAllModes 清除整表 API、行和单元格的全部 override。

setRowMode 和 setCellMode 既可传稳定 ID,也可传 selector。行 selector 接收 { row, rowIndex, rowId },单元格 selector 还会收到 { column, columnIndex, columnId };所有匹配项都会切换为指定模式。selector 仅在调用 API 时扫描一次当前 data,命中结果仍按稳定的行列 ID 保存,因此后续数据重排不会导致模式漂移。

每次有效的 API 变更都会触发 modeChange 事件。单项变更包含操作范围、动作及变更前后的有效模式;批量清理包含范围、clearAll 动作和清理数量。重复设置同一 override 或清理不存在的 override 不触发事件。该事件仅用于观察状态,不会触发 update:mode。

列的 slots.edit 可以是内联渲染函数或具名插槽名称。有效模式为 edit 时优先使用 edit 插槽;edit 插槽不存在时继续使用原有的 default 插槽、renderer、formatter 和原始值。edit/default 插槽作用域都包含 mode、rowId、行列上下文及当前行/单元格的模式操作。

下面的示例把三种 API 范围放在同一张表里:表格按钮调用 setMode,行按钮调用 setRowMode,单元格按钮调用 setCellMode。mode prop 的开关只改变整张表,点击“清除 API 模式”后即可看到它的效果。

进入编辑模式的触发控件、保存/取消、校验和行数据更新均由使用方实现。

useHeadlessTable 排序与筛选 ​

useHeadlessTable ​

useHeadlessTable(options) 返回响应式的 rows、filteredRows、total、pageCount、pagination、sorting 和 selectedKeys,并提供 setPage、setPageSize、toggleSorting、setFilter、resetFilters、toggleRowSelected、setSelectedKeys、clearSelection 与 reset 等操作方法。完整类型以包内导出的 UseHeadlessTableReturn 为准。

API ​

Props ​

名称类型默认值必填说明
columns[]——
data[]——
mode——Table-wide rendering mode. Row and cell modes are controlled through the exposed API.
getRowId——Stable row identity used to resolve row and cell mode overrides.
emptyTextstring | undefined"暂无数据"——
diagnosticsboolean | undefinedtrue—Emit development warnings for invalid renderer and slot configuration.
renderers{}—Per-table renderers override entries from the scoped or global registry.
rendererRegistry——Registry for this table. It overrides the injected and global registries.
slots{}—Table-level render-function configuration.

Emits ​

名称参数说明
modeChange—

Slots ​

名称作用域说明
default—
empty—

Expose ​

名称类型说明
modeEffective table-wide mode after resolving the API override and mode prop.
setMode—
clearMode() => void—
setRowMode—
clearRowMode—
setCellMode—
clearCellMode—
clearAllRowModes() => void—
clearAllCellModes() => void—
clearAllModes() => void—
getRowMode—
getCellMode—
columns—
getCellValue—
getColumnId—
getColumnLabel—
getRawCellValue—

组件贡献者 ​