jiaiyan Descriptions Component
Descriptions component displays multiple fields in list form, suitable for detail pages and information displays.
When to Use
- Product detail pages
- User profile displays
- Information summaries
- Specification lists
Basic Usage
<template>
<el-descriptions title="User Info">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
</el-descriptions>
</template>
Sizes
<template>
<el-descriptions title="Large" size="large">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
</el-descriptions>
<el-descriptions title="Default">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
</el-descriptions>
<el-descriptions title="Small" size="small">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
</el-descriptions>
</template>
Vertical List
<template>
<el-descriptions direction="vertical" border>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
</el-descriptions>
</template>
With Border
<template>
<el-descriptions border>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
</el-descriptions>
</template>
Rowspan
<template>
<el-descriptions border direction="vertical">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone" :rowspan="2">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue</el-descriptions-item>
</el-descriptions>
</template>
API Reference
Descriptions Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| border | With or without border | boolean |
false |
| column | Number of items in one line | number |
3 |
| direction | Direction of list | 'vertical' | 'horizontal' |
'horizontal' |
| size | Size of list | '' | 'large' | 'default' | 'small' |
— |
| title | Title text | string |
'' |
| extra | Extra text on top right | string |
'' |
| label-width | Label width of every column | string | number |
— |
Descriptions Slots
| Name | Description | Subtags |
|---|---|---|
| default | Customize default content | Descriptions Item |
| title | Custom title | — |
| extra | Custom extra area | — |
DescriptionsItem Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| label | Label text | string |
'' |
| span | Colspan of column | number |
1 |
| rowspan | Number of rows to span | number |
1 |
| width | Column width | string | number |
'' |
| min-width | Column minimum width | string | number |
'' |
| label-width | Column label width | string | number |
— |
| align | Column content alignment | 'left' | 'center' | 'right' |
'left' |
| label-align | Column label alignment | 'left' | 'center' | 'right' |
— |
| class-name | Column content class | string |
'' |
| label-class-name | Column label class | string |
'' |
Best Practices
- Use
borderfor better visual separation - Use
direction="vertical"for compact displays - Use
spanandrowspanfor complex layouts