Descriptions 描述列表

成组展示多个只读字段。

何时使用

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

代码演示

User Info
UserNameZhou Maomao
Telephone1810000000
LiveHangzhou, Zhejiang
Remarkempty
Address No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
基本

简单的展示。

<template>
  <a-descriptions title="User Info">
    <a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
    <a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
    <a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
    <a-descriptions-item label="Remark">empty</a-descriptions-item>
    <a-descriptions-item label="Address">
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
    </a-descriptions-item>
  </a-descriptions>
</template>
User Info
Product Cloud Database Billing Mode Prepaid Automatic Renewal YES
Order time 2018-04-24 18-00-00 Usage Time 2019-04-24 18-00-00
Status Running
Negotiated Amount $80.00 Discount $20.00 Official Receipts $60.00
Config Info Data disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1
带边框的

带边框和背景颜色列表。

<template>
  <a-descriptions title="User Info" bordered>
    <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
    <a-descriptions-item label="Billing Mode">Prepaid</a-descriptions-item>
    <a-descriptions-item label="Automatic Renewal">YES</a-descriptions-item>
    <a-descriptions-item label="Order time">2018-04-24 18-00-00</a-descriptions-item>
    <a-descriptions-item label="Usage Time" :span="2">2019-04-24 18-00-00</a-descriptions-item>
    <a-descriptions-item label="Status" :span="3">
      <a-badge status="processing" text="Running" />
    </a-descriptions-item>
    <a-descriptions-item label="Negotiated Amount">$80.00</a-descriptions-item>
    <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
    <a-descriptions-item label="Official Receipts">$60.00</a-descriptions-item>
    <a-descriptions-item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1
      <br />
    </a-descriptions-item>
  </a-descriptions>
</template>


Custom Size
Product Cloud Database Billing Prepaid Time 18-00-00
Amount $80.00 Discount $20.00 Official $60.00
Config Info Data disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1


Custom Size
ProductCloud Database
BillingPrepaid
Time18-00-00
Amount$80.00
Discount$20.00
Official$60.00
自定义尺寸

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

<template>
  <div>
    <a-radio-group v-model:value="size" @change="onChange">
      <a-radio value="default">default</a-radio>
      <a-radio value="middle">middle</a-radio>
      <a-radio value="small">small</a-radio>
    </a-radio-group>
    <br />
    <br />
    <a-descriptions bordered title="Custom Size" :size="size">
      <template #extra>
        <a-button type="primary">Edit</a-button>
      </template>
      <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
      <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
      <a-descriptions-item label="Time">18-00-00</a-descriptions-item>
      <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
      <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
      <a-descriptions-item label="Official">$60.00</a-descriptions-item>
      <a-descriptions-item label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
        <br />
      </a-descriptions-item>
    </a-descriptions>
    <br />
    <br />
    <a-descriptions title="Custom Size" :size="size">
      <template #extra>
        <a-button type="primary">Edit</a-button>
      </template>
      <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
      <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
      <a-descriptions-item label="Time">18-00-00</a-descriptions-item>
      <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
      <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
      <a-descriptions-item label="Official">$60.00</a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
// TODO
import { RadioChangeEvent } from 'ant-design-vue/es/radio/interface'; 
export default defineComponent({
  setup() {
    const size = ref('default');
    const onChange = (e: RadioChangeEvent) => {
      console.log('size checked', e.target.value);
      size.value = e.target.value;
    }; 
    return {
      size,
      onChange,
    };
  },
});
</script>
Responsive Descriptions
Product Cloud Database Billing Prepaid Time 18-00-00
Amount $80.00 Discount $20.00 Official $60.00
Config Info Data disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1
响应式

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

<template>
  <a-descriptions
    title="Responsive Descriptions"
    bordered
    :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
    <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
    <a-descriptions-item label="Time">18-00-00</a-descriptions-item>
    <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
    <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
    <a-descriptions-item label="Official">$60.00</a-descriptions-item>
    <a-descriptions-item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1
    </a-descriptions-item>
  </a-descriptions>
</template>
User Info
UserName
Telephone
Live
Zhou Maomao
1810000000
Hangzhou, Zhejiang
Address
Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
empty
垂直

垂直的列表。

<template>
  <a-descriptions title="User Info" layout="vertical">
    <a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
    <a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
    <a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
    <a-descriptions-item label="Address" span="2">
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
    </a-descriptions-item>
    <a-descriptions-item label="Remark">empty</a-descriptions-item>
  </a-descriptions>
</template>
User Info
Product Billing Mode Automatic Renewal
Cloud Database Prepaid YES
Order time Usage Time
2018-04-24 18-00-00 2019-04-24 18-00-00
Status
Running
Negotiated Amount Discount Official Receipts
$80.00 $20.00 $60.00
Config Info
Data disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1
垂直带边框的

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

<template>
  <a-descriptions title="User Info" layout="vertical" bordered>
    <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
    <a-descriptions-item label="Billing Mode">Prepaid</a-descriptions-item>
    <a-descriptions-item label="Automatic Renewal">YES</a-descriptions-item>
    <a-descriptions-item label="Order time">2018-04-24 18-00-00</a-descriptions-item>
    <a-descriptions-item label="Usage Time" :span="2">2019-04-24 18-00-00</a-descriptions-item>
    <a-descriptions-item label="Status" :span="3">
      <a-badge status="processing" text="Running" />
    </a-descriptions-item>
    <a-descriptions-item label="Negotiated Amount">$80.00</a-descriptions-item>
    <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
    <a-descriptions-item label="Official Receipts">$60.00</a-descriptions-item>
    <a-descriptions-item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1
      <br />
    </a-descriptions-item>
  </a-descriptions>
</template>

API#

Descriptions props

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

Item props

参数 说明 类型 默认值 版本
label 内容的描述 string | VNode | slot -
span 包含列的数量 number 1
labelStyle 自定义标签样式 CSSProperties - 2.2.0
contentStyle 自定义内容样式 CSSProperties - 2.2.0

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