Descriptions 描述列表
以键值对形式展示信息，常用于详情页。支持边框模式、多种尺寸、标签位置、垂直布局等。
综合演示
一个完整的订单详情描述列表，展示边框模式、跨列、标签居上等多种特性组合使用。
订单详情
订单编号202506240001
下单时间2025-06-24 10:30:00
订单状态已发货
收货人张三
联系电话138****8888
支付方式微信支付
收货地址北京市朝阳区建国路88号SOHO现代城A座1205
商品总价¥ 299.00
备注请尽快发货，工作日白天方便收件。
基础用法
通过 NDescriptions 和 NDescriptionsItem 组合使用。
用户信息
用户名张三
手机号138****8888
邮箱zhangsan@example.com
地址北京市朝阳区
备注这是一段较长的备注信息，可以跨列显示。
边框模式
设置 bordered 属性展示带边框的描述列表。
产品信息
产品名称NacrDesign 组件库
版本号v0.1.8
框架Vue 3
许可协议MIT License
描述一套高质量的 Vue 3 组件库，提供丰富的企业级组件。
标签位置
通过 label-placement 设置标签在左侧或上方显示。
标签在左侧（默认）
品牌Apple
型号iPhone 16 Pro
颜色原色钛金属
存储256GB
标签在上方
品牌Apple
型号iPhone 16 Pro
颜色原色钛金属
存储256GB
屏幕6.3 英寸
重量199g
不同列数
通过 column 设置每行显示的列数。
两列（默认）
姓名李四
年龄28
职位前端工程师
城市上海
三列
姓名李四
年龄28
职位前端工程师
城市上海
部门技术部
工号EMP-0042
不同尺寸
通过 size 设置描述列表的内边距大小和字号。
小尺寸 (sm)
姓名王五
年龄32
中等尺寸 (md)
姓名王五
年龄32
大尺寸 (lg)
姓名王五
年龄32
跨列显示
通过 span 属性设置 NDescriptionsItem 占用列数。
服务器信息
主机名称web-server-01
IP 地址192.168.1.100
端口8080
操作系统CentOS 7.9 x86_64
内存32GB
描述该服务器用于承载前端静态资源和 API 网关，请勿随意重启。
无标题模式
不传入 title 属性可以使用无标题的简洁模式。
访问量12,345
转化率3.2%
客单价¥ 186.50
复购率28%
NDescriptions Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 标题，不设置则不显示标题区域 |
column | number | 2 | 每行显示的列数 |
bordered | boolean | false | 是否显示边框 |
size | 'sm' | 'md' | 'lg' | 'md' | 描述列表尺寸 |
labelPlacement | 'left' | 'top' | 'left' | 标签位置：左侧或上方 |
vertical | boolean | false | 是否使用垂直布局 |
NDescriptionsItem Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | — | 字段标签（必填） |
span | number | 1 | 占用列数 |
NDescriptions Slots
| 插槽名 | 说明 |
|---|---|
default | 描述列表内容，放置 NDescriptionsItem |
NDescriptionsItem Slots
| 插槽名 | 说明 |
|---|---|
default | 字段值内容 |