1. Descriptions描述列表

1.1. 列表形式展示多個字段。

1.2. Descriptions Attributes

參數	說明	類型	可選值	默認值
border	是否帶有邊框	boolean	無	false
column	一行Descriptions Item的數量	number	無	3
direction	排列的方向	string	vertical / horizontal	horizontal
size	列表的尺寸	string	medium / small / mini	無
title	標題文本, 顯示在左上方	string	無	無
extra	操作區文本, 顯示在右上方	string	無	無
colon	是否顯示冒號	boolean	無	true
labelClassName	自定義標簽類名	string	無	無
contentClassName	自定義內容類名	string	無	無
labelStyle	自定義標簽樣式	object	無	無
contentStyle	自定義內容樣式	object	無	無

1.3. Descriptions Slots

name	說明
title	自定義標題, 顯示在左上方
extra	自定義操作區, 顯示在右上方

1.4. Descriptions Item Attributes

參數	說明	類型	可選值	默認值
label	標簽文本	string	無	無
span	列的數量	number	無	1
labelClassName	自定義標簽類名	string	無	無
contentClassName	自定義內容類名	string	無	無
labelStyle	自定義標簽樣式	object	無	無
contentStyle	自定義內容樣式	object	無	無

1.5. Descriptions Item Slots

name	說明
label	自定義標簽文本

2. Descriptions描述列表例子

2.1. 使用腳手架新建一個名為element-ui-descriptions折疊面板的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Descriptions from '../components/Descriptions.vue' import SizeDescriptions from '../components/SizeDescriptions.vue' import VerticalDescriptions from '../components/VerticalDescriptions.vue' import MyselfDescriptions from '../components/MyselfDescriptions.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Descriptions' },{ path: '/Descriptions', component: Descriptions },{ path: '/SizeDescriptions', component: SizeDescriptions },{ path: '/VerticalDescriptions', component: VerticalDescriptions },{ path: '/MyselfDescriptions', component: MyselfDescriptions } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Descriptions.vue

<template><div><h1>基礎用法</h1><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></div> </template>

2.4. 在components下創建SizeDescriptions.vue

<template><div><h1>不同尺寸</h1><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 title="帶邊框列表" :column="3" :size="size" border><template slot="extra"><el-button type="primary" size="small">操作</el-button></template><el-descriptions-item><template slot="label"><i class="el-icon-user"></i>用戶名</template>kooriookami</el-descriptions-item><el-descriptions-item><template slot="label"><i class="el-icon-mobile-phone"></i>手機號</template>18100000000</el-descriptions-item><el-descriptions-item><template slot="label"><i class="el-icon-location-outline"></i>居住地</template>蘇州市</el-descriptions-item><el-descriptions-item><template slot="label"><i class="el-icon-tickets"></i>備注</template><el-tag size="small">學校</el-tag></el-descriptions-item><el-descriptions-item><template slot="label"><i class="el-icon-office-building"></i>聯系地址</template>江蘇省蘇州市吳中區吳中大道 1188 號</el-descriptions-item></el-descriptions><el-descriptions title="無邊框列表" :column="3" :size="size"><template slot="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></div> </template><script> export default {data () {return {size: ''}} } </script>

2.5. 在components下創建VerticalDescriptions.vue

<template><div><h1>垂直列表</h1><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-item label="性別">男</el-descriptions-item><el-descriptions-item label="年齡">21</el-descriptions-item></el-descriptions><el-descriptions 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-item label="性別">男</el-descriptions-item><el-descriptions-item label="年齡">21</el-descriptions-item></el-descriptions></div> </template>

2.6. 在components下創建MyselfDescriptions.vue

<template><div><el-descriptions title="自定義樣式列表" :column="3" border><el-descriptions-item label="用戶名" label-class-name="my-label" content-class-name="my-content">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="聯系地址" :contentStyle="{'text-align': 'right'}">江蘇省蘇州市吳中區吳中大道 1188 號</el-descriptions-item></el-descriptions></div> </template><style scoped>/deep/.my-label {background: #E1F3D8 !important;}/deep/.my-content {background: #FDE2E2;} </style>

2.7. 運行項目, 訪問http://localhost:8080/#/Descriptions

2.8. 運行項目, 訪問http://localhost:8080/#/SizeDescriptions?

2.9. 運行項目, 訪問http://localhost:8080/#/VerticalDescriptions?

?2.10. 運行項目, 訪問http://localhost:8080/#/MyselfDescriptions

總結

以上是生活随笔為你收集整理的055_Descriptions描述列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。