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设置列表的大小。可以设置为 middlesmall, 或不填(只有设置 bordered={true} 生效)default | middle | smalldefault
layout描述布局horizontal | verticalhorizontal
colon配置 Descriptions.Itemcolon 的默认值booleantrue

Item props

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

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