Descriptions描述列表 - 图1

Descriptions 描述列表

成组展示多个只读字段。

何时使用

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

代码演示

Descriptions描述列表 - 图2

基本

简单的展示。

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

Descriptions描述列表 - 图3

带边框的

带边框和背景颜色列表。

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

Descriptions描述列表 - 图4

自定义尺寸

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

  1. <template>
  2.   <div>
  3.     <a-radio-group v-model:value="size" @change="onChange">
  4.       <a-radio value="default">default</a-radio>
  5.       <a-radio value="middle">middle</a-radio>
  6.       <a-radio value="small">small</a-radio>
  7.     </a-radio-group>
  8.     <br />
  9.     <br />
  10.     <a-descriptions bordered title="Custom Size" :size="size">
  11.       <template #extra>
  12.         <a-button type="primary">Edit</a-button>
  13.       </template>
  14.       <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
  15.       <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
  16.       <a-descriptions-item label="Time">18:00:00</a-descriptions-item>
  17.       <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
  18.       <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
  19.       <a-descriptions-item label="Official">$60.00</a-descriptions-item>
  20.       <a-descriptions-item label="Config Info">
  21.         Data disk type: MongoDB
  22.         <br />
  23.         Database version: 3.4
  24.         <br />
  25.         Package: dds.mongo.mid
  26.         <br />
  27.         Storage space: 10 GB
  28.         <br />
  29.         Replication factor: 3
  30.         <br />
  31.         Region: East China 1
  32.         <br />
  33.       </a-descriptions-item>
  34.     </a-descriptions>
  35.     <br />
  36.     <br />
  37.     <a-descriptions title="Custom Size" :size="size">
  38.       <template #extra>
  39.         <a-button type="primary">Edit</a-button>
  40.       </template>
  41.       <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
  42.       <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
  43.       <a-descriptions-item label="Time">18:00:00</a-descriptions-item>
  44.       <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
  45.       <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
  46.       <a-descriptions-item label="Official">$60.00</a-descriptions-item>
  47.     </a-descriptions>
  48.   </div>
  49. </template>
  50. <script lang="ts">
  51. import { defineComponent, ref } from 'vue';
  52. // TODO
  53. import { RadioChangeEvent } from 'ant-design-vue/es/radio/interface';
  55. export default defineComponent({
  56.   setup() {
  57.     const size = ref('default');
  58.     const onChange = (e: RadioChangeEvent) => {
  59.       console.log('size checked', e.target.value);
  60.       size.value = e.target.value;
  61.     };
  63.     return {
  64.       size,
  65.       onChange,
  66.     };
  67.   },
  68. });
  69. </script>

Descriptions描述列表 - 图5

响应式

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

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

Descriptions描述列表 - 图6

垂直

垂直的列表。

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

Descriptions描述列表 - 图7

垂直带边框的

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

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

API

Descriptions props

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

Item props

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

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