仅桌面端保证样式

DetailDescriptions 详情描述

items 配置式的详情描述：值从 data 对象自动取（支持 'a.b' 路径），支持 formatter 与按名分发插槽，基于 EbDescriptions 渲染。

取值规则：

prop 支持点路径（如 user.name），中间为 null/undefined 时安全返回 undefined；
没有配置 formatter 与 slot 时，值为 null/undefined 显示 placeholder（缺省 -），其余按原值输出；注意空字符串不算空值，会原样显示为空白；
formatter: (value, data) => string 的第二个参数是整个 data 对象，可做跨字段计算。

基础用法

订单详情

订单号	A-1001	客户	张三
金额	￥99.00	备注	-

  <eb-detail-descriptions
    title="订单详情"
    :column="2"
    :data="{ orderNo: 'A-1001', user: { name: '张三', phone: '13800000000' }, amount: 9900 }"
    :items="[
      { prop: 'orderNo', label: '订单号' },
      { prop: 'user.name', label: '客户' },
      { prop: 'amount', label: '金额', formatter: (v) => '￥' + (v / 100).toFixed(2) },
      { prop: 'remark', label: '备注' },
    ]"
  />

插槽自定义

item.slot 指定插槽名，作用域携带 { item, value }，适合渲染状态标签、链接、操作按钮等富内容；未命中的字段继续走默认文本渲染。

支付信息

订单号	A-2001	状态	已支付
支付渠道	支付宝	备注	暂无备注

  <eb-detail-descriptions
    title="支付信息"
    :column="2"
    :data="{ orderNo: 'A-2001', status: 'paid', channel: { name: '支付宝' }, remark: null }"
    :items="[
      { prop: 'orderNo', label: '订单号' },
      { prop: 'status', label: '状态', slot: 'status' },
      { prop: 'channel.name', label: '支付渠道' },
      { prop: 'remark', label: '备注', placeholder: '暂无备注' },
    ]"
  >
    <template #status="{ item, value }">
      <eb-status-tag :value="value" :statuses="[{ value: 'paid', label: '已支付', type: 'success' }, { value: 'pending', label: '待支付', type: 'warning' }]" />
    </template>
  </eb-detail-descriptions>

空值与格式化

remark 为 null 时显示 placeholder；时间戳经 formatter 转为可读文本；border: false 切换为无边框模式。

金额	￥99.00
优惠	无优惠
创建时间	9/5/2025, 8:40:00 AM

  <eb-detail-descriptions
    :column="1"
    :border="false"
    :data="{ amount: 9900, discount: null, createdAt: 1757032800000 }"
    :items="[
      { prop: 'amount', label: '金额', formatter: (v) => '￥' + (v / 100).toFixed(2) },
      { prop: 'discount', label: '优惠', placeholder: '无优惠' },
      { prop: 'createdAt', label: '创建时间', formatter: (v) => new Date(v).toLocaleString() },
    ]"
  />

标题扩展区与跨列

extra 插槽渲染在标题行右侧，常放编辑按钮；span 让字段占据多列，适合备注类长文本。

用户资料

姓名	张三	邮箱	zhang@example.com
角色	管理员	备注	内部账号，勿外传

  <eb-detail-descriptions
    title="用户资料"
    :column="2"
    :data="{ name: '张三', role: '管理员', email: 'zhang@example.com', remark: '内部账号，勿外传' }"
    :items="[
      { prop: 'name', label: '姓名' },
      { prop: 'email', label: '邮箱' },
      { prop: 'role', label: '角色' },
      { prop: 'remark', label: '备注', span: 2 },
    ]"
  >
    <template #extra>
      <eb-button size="small">编辑资料</eb-button>
    </template>
  </eb-detail-descriptions>

API

DetailDescriptions Props

参数	说明	类型	默认值
data	数据源对象	object	{}
items	字段配置	Item[]	[]
column	每行列数	number	3
border	边框模式	boolean	true
size	尺寸	small \| default \| large	default
title	标题	string
direction	排列方向	horizontal \| vertical	horizontal

Item

参数	说明	类型	默认值
prop	取值路径（支持 a.b）	string	—
label	标签	string
span	占列数	number	1
slot	内容插槽名，作用域 { item, value }	string	—
formatter	格式化	(value, data) => string	—
placeholder	空值占位（仅 null / undefined 生效）	string	-

Slots

参数	说明	类型	默认值
title	标题区域	—	title prop
extra	标题行右侧扩展区	—	—
item.slot	字段内容插槽，作用域 { item, value }	—	—

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

DetailDescriptions 详情描述 ​

基础用法 ​

插槽自定义 ​

空值与格式化 ​

标题扩展区与跨列 ​

API ​