055_Descriptions描述列表
1. Descriptions描述列表
1.1. 列表形式展⽰多个字段。
1.2. Descriptions Attributes
参数说明类型可选值默认值border是否带有边框boolean⽆fal
number⽆3资深的意思
column⼀⾏Descriptions Item的
morningcall数量
direction排列的⽅向string vertical / horizontal horizontal
size列表的尺⼨string medium / small / mini⽆
title标题⽂本, 显⽰在左上⽅string⽆⽆
extra操作区⽂本, 显⽰在右上⽅string⽆⽆
2013年高考试题
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
1import Vue from 'vue'
2import VueRouter from 'vue-router'
3import Descriptions from '../components/Descriptions.vue'
4import SizeDescriptions from '../components/SizeDescriptions.vue'
5import VerticalDescriptions from '../components/VerticalDescriptions.vue'
6import MylfDescriptions from '../components/MylfDescriptions.vue'
7
8Vue.u(VueRouter)
9
10const routes = [
11 { path: '/', redirect: '/Descriptions' },
12 { path: '/Descriptions', component: Descriptions },
13 { path: '/SizeDescriptions', component: SizeDescriptions },
14 { path: '/VerticalDescriptions', component: VerticalDescriptions },
15 { path: '/MylfDescriptions', component: MylfDescriptions }
16]
17
18const router = new VueRouter({
19 routes
ance20})courtesy
21
22export default router
2.3. 在components下创建Descriptions.vue
1<template>
美女与野兽歌曲
2 <div>
3 <h1>基础⽤法</h1>
4 <el-descriptions title="⽤户信息">
5 <el-descriptions-item label="⽤户名">kooriookami</el-descriptions-item>
6 <el-descriptions-item label="⼿机号">181********</el-descriptions-item>
7 <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
8 <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
9 <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中⼤道 1188 号</el-descriptions-item>
10 </el-descriptions>
11 </div>
12</template>
2.4. 在components下创建SizeDescriptions.vue
4 <el-radio-group v-model="size">
5 <el-radio label="">默认</el-radio>
6 <el-radio label="medium">中等</el-radio>
7 <el-radio label="small">⼩型</el-radio>
8 <el-radio label="mini">超⼩</el-radio>
9 </el-radio-group>
10
11 <el-descriptions title="带边框列表" :column="3" :size="size" border>
12 <template slot="extra"><el-button type="primary" size="small">操作</el-button></template>
13 <el-descriptions-item><template slot="label"><i class="el-icon-ur"></i>⽤户名</template>kooriookami</el-descriptions-item>
14 <el-descriptions-item><template slot="label"><i class="el-icon-mobile-phone"></i>⼿机号</template>181********</el-descriptions-item>
15 <el-descriptions-item><template slot="label"><i class="el-icon-location-outline"></i>居住地</template>苏州市</el-descriptions-item>英语值日报告
16 <el-descriptions-item><template slot="label"><i class="el-icon-tickets"></i>备注</template><el-tag size="small">学校</el-tag></el-descriptions-item
17 <el-descriptions-item><template slot="label"><i class="el-icon-office-building"></i>联系地址</template>江苏省苏州市吴中区吴中⼤道 1188 号</el-descript
18 </el-descriptions>
19
20 <el-descriptions title="⽆边框列表" :column="3" :size="size">
21 <template slot="extra"><el-button type="primary" size="small">操作</el-button></template>
22 <el-descriptions-item label="⽤户名">kooriookami</el-descriptions-item>
23 <el-descriptions-item label="⼿机号">181********</el-descriptions-item>
24 <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
25 <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
26 <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中⼤道 1188 号</el-descriptions-item>
27 </el-descriptions>
28 </div>
29</template>
30
31<script>
32export default {
33 data () {
34 return {
35 size: ''
36 }
37 }
38}
39</script>
2.5. 在components下创建VerticalDescriptions.vue
4 <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
5 <el-descriptions-item label="⽤户名">kooriookami</el-descriptions-item>
6 <el-descriptions-item label="⼿机号">181********</el-descriptions-item>
7 <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
8 <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
9 <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中⼤道 1188 号</el-descriptions-item>
10 <el-descriptions-item label="性别">男</el-descriptions-item>
11 <el-descriptions-item label="年龄">21</el-descriptions-item>
12 </el-descriptions>
13
14 <el-descriptions title="垂直⽆边框列表" :column="4" direction="vertical">
yamor15 <el-descriptions-item label="⽤户名">kooriookami</el-descriptions-item>
16 <el-descriptions-item label="⼿机号">181********</el-descriptions-item>
17 <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
18 <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
19 <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中⼤道 1188 号</el-descriptions-item>
20 <el-descriptions-item label="性别">男</el-descriptions-item>
21 <el-descriptions-item label="年龄">21</el-descriptions-item>
22 </el-descriptions>
23 </div>
24</template>
2.6. 在components下创建MylfDescriptions.vue
1<template>
everytime歌词2 <div>
3 <el-descriptions title="⾃定义样式列表" :column="3" border>
4 <el-descriptions-item label="⽤户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
5 <el-descriptions-item label="⼿机号">181********</el-descriptions-item>
6 <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
7 <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
8 <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中⼤道 1188 号</el-descriptions-item>
9 </el-descriptions>
10 </div>
11</template>
12
13<style scoped>
14 /deep/.my-label {
进度英语15 background: #E1F3D8 !important;
16 }
17 /deep/.my-content {
18 background: #FDE2E2;
19 }
20</style>
