ElementPlus Descriptions 描述列表
2021-09-26 16:02 更新
Descriptions 描述列表
列表形式展示多個(gè)字段。
基礎(chǔ)用法
<template>
<el-descriptions title="用戶信息">
<el-descriptions-item label="用戶名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手機(jī)號(hào)">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">蘇州市</el-descriptions-item>
<el-descriptions-item label="備注">
<el-tag size="small">學(xué)校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="聯(lián)系地址"
>江蘇省蘇州市吳中區(qū)吳中大道 1188 號(hào)</el-descriptions-item
>
</el-descriptions>
</template>
不同尺寸
<template>
<el-radio-group v-model="size">
<el-radio label="">默認(rèn)</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>
手機(jī)號(hào)
</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">學(xué)校</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-office-building"></i>
聯(lián)系地址
</template>
江蘇省蘇州市吳中區(qū)吳中大道 1188 號(hào)
</el-descriptions-item>
</el-descriptions>
<el-descriptions
class="margin-top"
title="無(wú)邊框列表"
: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="手機(jī)號(hào)">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">蘇州市</el-descriptions-item>
<el-descriptions-item label="備注">
<el-tag size="small">學(xué)校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="聯(lián)系地址"
>江蘇省蘇州市吳中區(qū)吳中大道 1188 號(hào)</el-descriptions-item
>
</el-descriptions>
</template>
<script>
export default {
data() {
return {
size: '',
}
},
}
</script>
垂直列表
<template>
<el-descriptions title="垂直帶邊框列表" direction="vertical" :column="4" border>
<el-descriptions-item label="用戶名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手機(jī)號(hào)">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地" :span="2">蘇州市</el-descriptions-item>
<el-descriptions-item label="備注">
<el-tag size="small">學(xué)校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="聯(lián)系地址"
>江蘇省蘇州市吳中區(qū)吳中大道 1188 號(hào)</el-descriptions-item
>
</el-descriptions>
<el-descriptions
class="margin-top"
title="垂直無(wú)邊框列表"
:column="4"
direction="vertical"
>
<el-descriptions-item label="用戶名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手機(jī)號(hào)">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地" :span="2">蘇州市</el-descriptions-item>
<el-descriptions-item label="備注">
<el-tag size="small">學(xué)校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="聯(lián)系地址"
>江蘇省蘇州市吳中區(qū)吳中大道 1188 號(hào)</el-descriptions-item
>
</el-descriptions>
</template>
自定義樣式
<template>
<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="手機(jī)號(hào)" 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">學(xué)校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="聯(lián)系地址" label-align="right" align="center"
>江蘇省蘇州市吳中區(qū)吳中大道 1188 號(hào)</el-descriptions-item
>
</el-descriptions>
</template>
Descriptions Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| border | 是否帶有邊框 | boolean | — | false |
| column | 一行 Descriptions Item 的數(shù)量 | number | — | 3 |
| direction | 排列的方向 | string | vertical / horizontal | horizontal |
| size | 列表的尺寸 | string | medium / small / mini | — |
| title | 標(biāo)題文本，顯示在左上方 | string | — | — |
| extra | 操作區(qū)文本，顯示在右上方 | string | — | — |
Descriptions Slots
| Name | 說明 |
|---|---|
| title | 自定義標(biāo)題，顯示在左上方 |
| extra | 自定義操作區(qū)，顯示在右上方 |
Descriptions Item Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| label | 標(biāo)簽文本 | string | — | — |
| span | 列的數(shù)量 | number | — | 1 |
| width | 列的寬度，不同行相同列的寬度按最大值設(shè)定（如無(wú) border ，寬度包含標(biāo)簽與內(nèi)容） | string / number | — | — |
| min-width | 列的最小寬度，與 width 的區(qū)別是 width 是固定的，min-width 會(huì)把剩余寬度按比例分配給設(shè)置了 min-width 的列（如無(wú) border，寬度包含標(biāo)簽與內(nèi)容） | string / number | — | — |
| align | 列的內(nèi)容對(duì)齊方式（如無(wú) border，對(duì)標(biāo)簽和內(nèi)容均生效） | string | left / center / right | left |
| label-align | 列的標(biāo)簽對(duì)齊方式，若不設(shè)置該項(xiàng)，則使用內(nèi)容的對(duì)齊方式（如無(wú) border，請(qǐng)使用 align 參數(shù)） | string | left / center / right | — |
| class-name | 列的內(nèi)容自定義類名 | string | — | — |
| label-class-name | 列的標(biāo)簽自定義類名 | string | — | — |
Descriptions Item Slots
| Name | 說明 |
|---|---|
| label | 自定義標(biāo)簽文本 |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：