Descriptions 描述列表

列表形式展示多个字段的信息。

基础用法

通过 ZcDescriptionsItem 子组件定义每个描述项。

用户信息

用户名:	张三	手机号:	18888888888	居住地:	北京市朝阳区
备注:	这是一段备注说明	联系地址:	北京市海淀区	邮箱:	zhangsan@example.com

<template>
  <ZcDescriptions title="用户信息">
    <ZcDescriptionsItem label="用户名">张三</ZcDescriptionsItem>
    <ZcDescriptionsItem label="手机号">18888888888</ZcDescriptionsItem>
    <ZcDescriptionsItem label="居住地">北京市朝阳区</ZcDescriptionsItem>
    <ZcDescriptionsItem label="备注">这是一段备注说明</ZcDescriptionsItem>
    <ZcDescriptionsItem label="联系地址">北京市海淀区</ZcDescriptionsItem>
    <ZcDescriptionsItem label="邮箱">zhangsan@example.com</ZcDescriptionsItem>
  </ZcDescriptions>
</template>

带边框

设置 border 属性可添加边框样式。

用户信息

用户名:	张三	手机号:	18888888888	居住地:	北京市
备注:	这是一段很长的备注说明文字。

<template>
  <ZcDescriptions title="用户信息" border :column="3">
    <ZcDescriptionsItem label="用户名">张三</ZcDescriptionsItem>
    <ZcDescriptionsItem label="手机号">18888888888</ZcDescriptionsItem>
    <ZcDescriptionsItem label="居住地">北京市</ZcDescriptionsItem>
    <ZcDescriptionsItem label="备注" :span="3">这是一段很长的备注说明文字。</ZcDescriptionsItem>
  </ZcDescriptions>
</template>

Descriptions API

ZcDescriptions Props

参数	说明	类型	默认值
border	是否添加边框	boolean	false
column	一行显示的数量	number	3
direction	排列方向	'horizontal' | 'vertical'	'horizontal'
size	尺寸	'large' | 'default' | 'small'	'default'
title	标题	string	''
extra	操作区文本	string	''
colon	是否显示冒号	boolean	true
labelStyle	标签自定义样式	object	{}
contentStyle	内容自定义样式	object	{}

ZcDescriptions Slots

插槽名	说明
default	描述项列表
title	自定义标题
extra	自定义操作区

ZcDescriptionsItem Props

参数	说明	类型	默认值
label	标签文本	string	—
span	跨列数	number	1