文章背景：一名合格的前端，熟练的掌握组件库是必须的。但因组件有60多个，有易有难，因此不好学习，而重复的看文档，效率低下。若能将常见的记录下来，则可以高效的开发。
文章目的：熟练掌握组件的常用功能。记录难点和bug。文章分为6个：布局类，页面布局类，提示类。表单类，显示数据类，其他功能类(折叠和对话框)。其中表单类，数据类，其他功能类式重点和难点。
前置说明： 属性里面：
原生html属性都不需要"："。 新的属性，vue里面的v.bind, 简写：，绑定属性。 如果是布尔类型的，没有：则是用默认值，有：+string类型。
1、布局基础类
Container！
一.基本概念：后台类型布局的样式，可以使用Container布局。
一.el-container: 是主容器。
二.el-aside,el-main： el-aside宽度默认值是60。从上到下排序。如果是想在一起需要用一个container包裹。
三.el-header、el-footer: 从上到下排序。高度默认是60px；
Layout！
一.基本概念： 一行分成24个栅格。
二属性：
el-row属性：
1、gutter:
指定每一栏之间的间隔，默认为0。 gutter为50时，那么两个就会栅格之间内容会间隔50。颜色不会间隔。
2、type、justify、align：
type可以选择flex布局；justify水平排列。align：可以选择start，center，space-around,space-between。
图1：第一个space-between，第二个是center
el-col 属性：
1、span：栅格占据列数。默认值为24。
图2：分成6和18栅格，以及4个6个栅格
2、 offset：栅格左侧的间隔格数。（col整体向右移动栅格数）
图3：第一个是没有间隔的，第二个就是左侧有6个间隔。
3、push，pull：栅格向右移动格数。 栅格向左移动格式。
Icon
一.基本概念：
在i，button，tag标签使用。class="icon名称"
二.属性：
可以使用font-size，color改变颜色。
LINK
一.基本概念：
链接文字。
二.属性：
type类型 disabled禁用。 :underline="false"
Button
一.属性： 字符串类型： type = "primary"info"test" class="icon" size ="mini" native-type = "button"
布尔类型： plain disabled round autofouce :loading= "true"
2、页面布局类
Tabs!
Card
Breadcrumb
3、表单类
Radio CheckBox
Input！
1、基本输入框带双向绑定。 v-model
2、布尔属性： clearable
show-word-limit
字符串属性： type="textarea,password,text"
placeholder
prefix-icon/suffix-icon/
输入框：：：focus/blur/select ,自动完成的有：select,change
数字属性： maxlength,minlength
Select！
1、el-select 双向绑定: v-model 字符串属性：placeholder
布尔属性：
清空属性：clearable
多选属性：multiple
可以搜索的属性 filterable：
远程搜索方式
分组方式
自定义模板
多选的第二种方式
2、el-option
属性：
v-for= "i in options"
:label
:value
:key=
:disabled="items.value===2"
options:[{value=''、label=''}]。
Cascader！
1、双向绑定：v-model 2、字符串属性： 选项:option 改成悬停+多选:props="{expendTrigger:'hover',mutiple:true}"
布尔属性： clearable disabled 是否只显示最后一个：show-all-levels
value: options:[{ value:1, label:'二级菜单'， children:[{value:11,label:'北京',children:[{value:22,label:'海淀区'}]}]}]
Switch
1、双向绑定：v-model ="" 打开颜色active-color= "" 关闭颜色inactive-color = "" 打开文字：active-text = "" 关闭文字：inactive-text=""
Slide
1、双向绑定：v-model="" 字符串属性： 自定义格式化:format-tooptip="formatTooltip" 离散效果：:setp="10" 范围选择：range :min = "1" max = "10" 布尔属性： 隐藏提示: :show-tooltip="" 断点效果：:show-steps = "" 输入框：show-input
TimePicker DatePicker ColorPicker
el-time-select 固定时间：:picker-option= "{start:'18：30',step:'00:15',end:'18:00'}" "sekectableRange:"18:00:00-20:00:00" 滚动选择:arrow-control 丰富任意时间:is-range range-separator='至于' start-placeholder='' end-placeholder=''
value=new Date(2020,1,1,1,1,1,1)
el-date-picker type="datetime"
Upload！
路径：action="" 名称：name="" 多选：multiple 限制：:limit=3 方法： 删除时触发：on-removed 超出限制：on-exected 成功时执行：on-sucess
Rate
颜色属性：:colors 显示文字：show-text 显示分数：show-score 禁用：disabled
Transfer
:data="data"
{key:1,label:'上海'} {key:2,label:'深圳'} value=[] 搜索内容： filterable filter-placeholder="请输入城市拼音"
Form！
页面UI排版，数据验证，发送请求，数据入库。 el-form :model="form" :rules="rules" :inline="true" ref="form"
el-form-item label：活动名称 prop=name
el-input v-model="form.name"
4、显示数据类
Table ！
Pagination！
Tag！
type属性 :key v-for='tag in tags'
tag.splice(this.tags.indexOf(tag),deleteCount) 删除数组内部元素。
Badge Progress Avatar：
badge标记：el-badge el-badge badge红点：el-badge is-dot属性
