mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
f2e3dcb68e
* feat(descriptions): add new feature for customized style add props: width, min-width, align, label-align, class-name, label-class-name re #1976 #2353 * feat: update docs * feat: update docs * feat: update * feat: separate type
180 lines
7.1 KiB
Markdown
180 lines
7.1 KiB
Markdown
## Descriptions 描述列表
|
|
|
|
列表形式展示多个字段。
|
|
|
|
### 基础用法
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<el-descriptions title="用户信息">
|
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
|
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
|
<el-descriptions-item label="备注">
|
|
<el-tag size="small">学校</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
```
|
|
:::
|
|
|
|
### 不同尺寸
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<template>
|
|
<el-radio-group v-model="size">
|
|
<el-radio label="">默认</el-radio>
|
|
<el-radio label="medium">中等</el-radio>
|
|
<el-radio label="small">小型</el-radio>
|
|
<el-radio label="mini">超小</el-radio>
|
|
</el-radio-group>
|
|
|
|
<el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
|
|
<template #extra>
|
|
<el-button type="primary" size="small">操作</el-button>
|
|
</template>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<i class="el-icon-user"></i>
|
|
用户名
|
|
</template>
|
|
kooriookami
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<i class="el-icon-mobile-phone"></i>
|
|
手机号
|
|
</template>
|
|
18100000000
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<i class="el-icon-location-outline"></i>
|
|
居住地
|
|
</template>
|
|
苏州市
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<i class="el-icon-tickets"></i>
|
|
备注
|
|
</template>
|
|
<el-tag size="small">学校</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<i class="el-icon-office-building"></i>
|
|
联系地址
|
|
</template>
|
|
江苏省苏州市吴中区吴中大道 1188 号
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
|
|
<template #extra>
|
|
<el-button type="primary" size="small">操作</el-button>
|
|
</template>
|
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
|
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
|
<el-descriptions-item label="备注">
|
|
<el-tag size="small">学校</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
size: ''
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### 垂直列表
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
|
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
|
<el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
|
|
<el-descriptions-item label="备注">
|
|
<el-tag size="small">学校</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
|
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
|
<el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
|
|
<el-descriptions-item label="备注">
|
|
<el-tag size="small">学校</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
```
|
|
:::
|
|
|
|
### 自定义样式
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<el-descriptions title="自定义样式列表" :column="3" border>
|
|
<el-descriptions-item label="用户名" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
|
|
<el-descriptions-item label="手机号" label-align="right" align="center">18100000000</el-descriptions-item>
|
|
<el-descriptions-item label="居住地" label-align="right" align="center">苏州市</el-descriptions-item>
|
|
<el-descriptions-item label="备注" label-align="right" align="center">
|
|
<el-tag size="small">学校</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址" label-align="right" align="center">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
```
|
|
:::
|
|
|
|
### Descriptions Attributes
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
|
| border | 是否带有边框 | boolean | — | false |
|
|
| column | 一行 `Descriptions Item` 的数量 | number | — | 3 |
|
|
| direction | 排列的方向 | string | vertical / horizontal | horizontal |
|
|
| size | 列表的尺寸 | string | medium / small / mini | — |
|
|
| title | 标题文本，显示在左上方 | string | — | — |
|
|
| extra | 操作区文本，显示在右上方 | string | — | — |
|
|
|
|
### Descriptions Slots
|
|
|
|
| Name | 说明 |
|
|
|------|--------|
|
|
| title | 自定义标题，显示在左上方 |
|
|
| extra | 自定义操作区，显示在右上方 |
|
|
|
|
### Descriptions Item Attributes
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
|
| label | 标签文本 | string | — | — |
|
|
| span | 列的数量 | number | — | 1 |
|
|
| width | 列的宽度，不同行相同列的宽度按最大值设定 | string / number | — | — |
|
|
| min-width | 列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列 | string / number | — | — |
|
|
| align | 列的内容对齐方式 | string | left / center / right | left |
|
|
| label-align | 列的标签对齐方式，若不设置该项，则使用内容的对齐方式 | string | left / center / right | — |
|
|
| class-name | 列的内容自定义类名 | string | — | — |
|
|
| label-class-name | 列的标签自定义类名 | string | — | — |
|
|
|
|
### Descriptions Item Slots
|
|
|
|
| Name | 说明 |
|
|
|------|--------|
|
|
| label | 自定义标签文本 |
|