展示渲染器(displayAs)
展示渲染器决定 Cell 在 display 模式下的渲染方式。
渲染器列表
| displayAs | 渲染效果 | 说明 |
|---|---|---|
text | 纯文本 | 默认,直接输出值 |
number | 千分位格式化数字 | 1234567 → 1,234,567 |
currency | 货币符号 + 格式化金额 | 1234.5 → ¥1,234.50 |
tag | Element Plus Tag 组件 | 配合字典映射颜色 |
status | 圆点 + 文字 | 适合状态类字段 |
date | 格式化日期字符串 | 按 format 格式化 |
image | 缩略图(可预览) | 单图/多图,支持画廊预览 |
file | 文件展示 | 文件名 + 图标 + 下载按钮 |
link | 可点击超链接 | 带 target 配置 |
copy | 文字 + 复制按钮 | 点击复制到剪贴板 |
progress | 进度条 | Element Plus Progress |
detail | 详情按钮 | 按钮/链接,点击弹出详情弹窗 |
tag / status 颜色查找优先级
cellProps.colors中的显式映射- dict 项中的
color字段 - 无匹配时使用默认色(
info)
合法的 displayAs 覆盖组合
并非所有 cell 类型都能搭配任意 displayAs。下表列出了合法的组合(✅ 表示可用):
| cell \ displayAs | text | number | currency | tag | status | date | image | file | link | copy | progress | detail |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text | ✅ | — | — | — | — | — | — | — | ✅ | ✅ | — | ✅ |
number | ✅ | ✅ | ✅ | — | — | — | — | — | — | ✅ | ✅ | — |
currency | ✅ | ✅ | ✅ | — | — | — | — | — | — | ✅ | — | — |
enum | ✅ | — | — | ✅ | ✅ | — | — | — | — | — | — | — |
boolean | ✅ | — | — | ✅ | ✅ | — | — | — | — | — | — | — |
datetime | ✅ | — | — | — | — | ✅ | — | — | — | ✅ | — | — |
dateRange | ✅ | — | — | — | — | ✅ | — | — | — | — | — | — |
image | — | — | — | — | — | — | ✅ | — | ✅ | — | — | — |
file | — | — | — | — | — | — | — | ✅ | ✅ | — | — | — |
link | ✅ | — | — | — | — | — | — | — | ✅ | ✅ | — | — |
detail | ✅ | — | — | — | — | — | — | — | — | — | — | ✅ |
注意
非法组合在开发模式下会触发警告,并回退到 Cell 类型的默认渲染器。