项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
双端兼容 · 桌面 + 移动

CellStack 双行单元格 ​

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

使用建议:

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

基础用法 ​

订单 A-1001
张三 · 2026-01-01

在表格中使用 ​

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

插槽自定义 ​

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

订单 A-1003
张三 · 交付部 · 2026-03-15

只渲染主行 ​

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

只有主行

数值内容 ​

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

12800
含税 14464

取舍建议 ​

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

注意事项:

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

API ​

CellStack Props

参数说明类型默认值
main主行文本string | number
sub副行文本(空且无插槽时只渲染主行)string | number

Slots

参数说明类型默认值
main主行内容—main prop
sub副行内容—sub prop

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