---
url: /components/cell-stack.md
---
# CellStack 双行单元格

表格单元格的双行排版：主行加粗、副行浅灰省略。多数场景可直接用 DataTable 的列 `stack` 函数；需要插槽控制时使用本组件。

使用建议：

* DataTable 列配置 `stack: (row) => row.xxx`：纯文本副行，零模板代码；
* 列插槽内手写 `<eb-cell-stack>`：副行需要拼接多字段、格式化或塞入图标等富内容时用；
* `sub` 为空且未提供 `sub` 插槽时只渲染主行单行，不会留出空行。

## 基础用法

## 在表格中使用

典型位置是 EbTable / EbDataTable 的单元格插槽内，主行放标题、副行放归属或时间等次级信息。

## 插槽自定义

`main` / `sub` 两个具名插槽分别接管两行内容，作用域内可混用任意组件与格式化逻辑。

## 只渲染主行

副行为空且无插槽时自动退化为单行，适合数据可能缺失的列，不需要额外条件渲染。

## 数值内容

`main / sub` 接受数字，常用于金额、数量列；格式化（千分位、货币符号）在传入前或经插槽完成。

## 取舍建议

* 只有纯文本副行：优先用 DataTable 列配置 `stack: (row) => row.xxx`，零模板代码；
* 副行需要多字段拼接、图标或其他组件：在列插槽内使用本组件；
* 表格之外的双行排版（列表项、卡片标题区）同样可以复用本组件，样式即两行文本排版。

注意事项：

* 副行样式自带单行省略，过长内容会被截断，重要信息不要只放在副行；
* 组件不处理越界点击与事件冒泡，需要行内交互（如副行链接）时在插槽内自行组织；
* 不要在 `main / sub` 传入 HTML 字符串，组件按纯文本渲染；
* 与 DataTable 列 `stack` 函数渲染结果一致，两者不要同时对同一列使用，插槽优先级更高。

## API

本组件无事件与实例方法，纯展示。