055_Descriptions描述列表

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

2.4. 在components下创建SizeDescriptions.vue

2.5. 在components下创建VerticalDescriptions.vue

2.6. 在components下创建MyselfDescriptions.vue

2.7. 运行项目, 访问http://localhost:8080/#/Descriptions

2.8. 运行项目, 访问http://localhost:8080/#/SizeDescriptions 

2.9. 运行项目, 访问http://localhost:8080/#/VerticalDescriptions 

 2.10. 运行项目, 访问http://localhost:8080/#/MyselfDescriptions