Descriptions 描述列表 (版本: 1.5.0+)

成组展示多个只读字段。

何时使用

常见于详情页的信息展示。

代码演示

Descriptions描述列表 - 图1

基本

简单的展示。

  1. <template>
  2.   <a-descriptions title="User Info">
  3.     <a-descriptions-item label="UserName">
  4.       Zhou Maomao
  5.     </a-descriptions-item>
  6.     <a-descriptions-item label="Telephone">
  7.       1810000000
  8.     </a-descriptions-item>
  9.     <a-descriptions-item label="Live">
  10.       Hangzhou, Zhejiang
  11.     </a-descriptions-item>
  12.     <a-descriptions-item label="Remark">
  13.       empty
  14.     </a-descriptions-item>
  15.     <a-descriptions-item label="Address">
  16.       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  17.     </a-descriptions-item>
  18.   </a-descriptions>
  19. </template>

Descriptions描述列表 - 图2

带边框的

  1. <template>
  2.   <a-descriptions title="User Info" bordered>
  3.     <a-descriptions-item label="Product">
  4.       Cloud Database
  5.     </a-descriptions-item>
  6.     <a-descriptions-item label="Billing Mode">
  7.       Prepaid
  8.     </a-descriptions-item>
  9.     <a-descriptions-item label="Automatic Renewal">
  10.       YES
  11.     </a-descriptions-item>
  12.     <a-descriptions-item label="Order time">
  13.       2018-04-24 18:00:00
  14.     </a-descriptions-item>
  15.     <a-descriptions-item label="Usage Time" :span="2">
  16.       2019-04-24 18:00:00
  17.     </a-descriptions-item>
  18.     <a-descriptions-item label="Status" :span="3">
  19.       <a-badge status="processing" text="Running" />
  20.     </a-descriptions-item>
  21.     <a-descriptions-item label="Negotiated Amount">
  22.       $80.00
  23.     </a-descriptions-item>
  24.     <a-descriptions-item label="Discount">
  25.       $20.00
  26.     </a-descriptions-item>
  27.     <a-descriptions-item label="Official Receipts">
  28.       $60.00
  29.     </a-descriptions-item>
  30.     <a-descriptions-item label="Config Info">
  31.       Data disk type: MongoDB
  32.       <br />
  33.       Database version: 3.4
  34.       <br />
  35.       Package: dds.mongo.mid
  36.       <br />
  37.       Storage space: 10 GB
  38.       <br />
  39.       Replication factor: 3
  40.       <br />
  41.       Region: East China 1<br />
  42.     </a-descriptions-item>
  43.   </a-descriptions>
  44. </template>

Descriptions描述列表 - 图3

自定义尺寸

自定义尺寸，适应在各种容器中展示。

  1. <template>
  2.   <div>
  3.     <a-radio-group v-model="size" @change="onChange">
  4.       <a-radio value="default">
  5.         default
  6.       </a-radio>
  7.       <a-radio value="middle">
  8.         middle
  9.       </a-radio>
  10.       <a-radio value="small">
  11.         small
  12.       </a-radio>
  13.     </a-radio-group>
  14.     <br />
  15.     <br />
  16.     <a-descriptions bordered title="Custom Size" :size="size">
  17.       <a-descriptions-item label="Product">
  18.         Cloud Database
  19.       </a-descriptions-item>
  20.       <a-descriptions-item label="Billing">
  21.         Prepaid
  22.       </a-descriptions-item>
  23.       <a-descriptions-item label="Time">
  24.         18:00:00
  25.       </a-descriptions-item>
  26.       <a-descriptions-item label="Amount">
  27.         $80.00
  28.       </a-descriptions-item>
  29.       <a-descriptions-item label="Discount">
  30.         $20.00
  31.       </a-descriptions-item>
  32.       <a-descriptions-item label="Official">
  33.         $60.00
  34.       </a-descriptions-item>
  35.       <a-descriptions-item label="Config Info">
  36.         Data disk type: MongoDB
  37.         <br />
  38.         Database version: 3.4
  39.         <br />
  40.         Package: dds.mongo.mid
  41.         <br />
  42.         Storage space: 10 GB
  43.         <br />
  44.         Replication factor: 3
  45.         <br />
  46.         Region: East China 1<br />
  47.       </a-descriptions-item>
  48.     </a-descriptions>
  49.     <br />
  50.     <br />
  51.     <a-descriptions title="Custom Size" :size="size">
  52.       <a-descriptions-item label="Product">
  53.         Cloud Database
  54.       </a-descriptions-item>
  55.       <a-descriptions-item label="Billing">
  56.         Prepaid
  57.       </a-descriptions-item>
  58.       <a-descriptions-item label="Time">
  59.         18:00:00
  60.       </a-descriptions-item>
  61.       <a-descriptions-item label="Amount">
  62.         $80.00
  63.       </a-descriptions-item>
  64.       <a-descriptions-item label="Discount">
  65.         $20.00
  66.       </a-descriptions-item>
  67.       <a-descriptions-item label="Official">
  68.         $60.00
  69.       </a-descriptions-item>
  70.     </a-descriptions>
  71.   </div>
  72. </template>
  73. <script>
  74. export default {
  75.   data() {
  76.     return {
  77.       size: 'default',
  78.     };
  79.   },
  80.   methods: {
  81.     onChange(e) {
  82.       console.log('size checked', e.target.value);
  83.       this.size = e.target.value;
  84.     },
  85.   },
  86. };
  87. </script>

Descriptions描述列表 - 图4

响应式

通过响应式的配置可以实现在小屏幕设备上的完美呈现。

  1. <template>
  2.   <div>
  3.     <a-descriptions
  4.       title="Responsive Descriptions"
  5.       bordered
  6.       :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  7.     >
  8.       <a-descriptions-item label="Product">
  9.         Cloud Database
  10.       </a-descriptions-item>
  11.       <a-descriptions-item label="Billing">
  12.         Prepaid
  13.       </a-descriptions-item>
  14.       <a-descriptions-item label="Time">
  15.         18:00:00
  16.       </a-descriptions-item>
  17.       <a-descriptions-item label="Amount">
  18.         $80.00
  19.       </a-descriptions-item>
  20.       <a-descriptions-item label="Discount">
  21.         $20.00
  22.       </a-descriptions-item>
  23.       <a-descriptions-item label="Official">
  24.         $60.00
  25.       </a-descriptions-item>
  26.       <a-descriptions-item label="Config Info">
  27.         Data disk type: MongoDB
  28.         <br />
  29.         Database version: 3.4
  30.         <br />
  31.         Package: dds.mongo.mid
  32.         <br />
  33.         Storage space: 10 GB
  34.         <br />
  35.         Replication factor: 3
  36.         <br />
  37.         Region: East China 1
  38.       </a-descriptions-item>
  39.     </a-descriptions>
  40.   </div>
  41. </template>

Descriptions描述列表 - 图5

垂直

垂直的列表。

  1. <template>
  2.   <a-descriptions title="User Info" layout="vertical">
  3.     <a-descriptions-item label="UserName">
  4.       Zhou Maomao
  5.     </a-descriptions-item>
  6.     <a-descriptions-item label="Telephone">
  7.       1810000000
  8.     </a-descriptions-item>
  9.     <a-descriptions-item label="Live">
  10.       Hangzhou, Zhejiang
  11.     </a-descriptions-item>
  12.     <a-descriptions-item label="Address" span="2">
  13.       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  14.     </a-descriptions-item>
  15.     <a-descriptions-item label="Remark">
  16.       empty
  17.     </a-descriptions-item>
  18.   </a-descriptions>
  19. </template>

Descriptions描述列表 - 图6

垂直带边框的

垂直带边框和背景颜色的列表。

  1. <template>
  2.   <a-descriptions title="User Info" layout="vertical" bordered>
  3.     <a-descriptions-item label="Product">
  4.       Cloud Database
  5.     </a-descriptions-item>
  6.     <a-descriptions-item label="Billing Mode">
  7.       Prepaid
  8.     </a-descriptions-item>
  9.     <a-descriptions-item label="Automatic Renewal">
  10.       YES
  11.     </a-descriptions-item>
  12.     <a-descriptions-item label="Order time">
  13.       2018-04-24 18:00:00
  14.     </a-descriptions-item>
  15.     <a-descriptions-item label="Usage Time" :span="2">
  16.       2019-04-24 18:00:00
  17.     </a-descriptions-item>
  18.     <a-descriptions-item label="Status" :span="3">
  19.       <a-badge status="processing" text="Running" />
  20.     </a-descriptions-item>
  21.     <a-descriptions-item label="Negotiated Amount">
  22.       $80.00
  23.     </a-descriptions-item>
  24.     <a-descriptions-item label="Discount">
  25.       $20.00
  26.     </a-descriptions-item>
  27.     <a-descriptions-item label="Official Receipts">
  28.       $60.00
  29.     </a-descriptions-item>
  30.     <a-descriptions-item label="Config Info">
  31.       Data disk type: MongoDB
  32.       <br />
  33.       Database version: 3.4
  34.       <br />
  35.       Package: dds.mongo.mid
  36.       <br />
  37.       Storage space: 10 GB
  38.       <br />
  39.       Replication factor: 3
  40.       <br />
  41.       Region: East China 1<br />
  42.     </a-descriptions-item>
  43.   </a-descriptions>
  44. </template>

API

Descriptions props

参数说明类型默认值
title描述列表的标题，显示在最顶部string | VNode | v-slot:title-
bordered是否展示边框booleanfalse
column一行的 DescriptionItems 数量，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number3
size设置列表的大小。可以设置为 middle 、small, 或不填（只有设置 bordered={true} 生效）default | middle | smalldefault
layout描述布局horizontal | verticalhorizontal
colon配置 Descriptions.Item 的 colon 的默认值booleantrue

Item props

参数说明类型默认值
label内容的描述string | VNode | v-slot:label-
span包含列的数量number1

span 是 Descriptions.Item 的数量。 span={2} 会占用两个 DescriptionsItem 的宽度。