Container容器：用于布局的容器组件，方便快速的搭建页面的基本结构
<el-container>:外层容器，当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列
<el-header>：顶部容器
<el-aside>: 侧边栏容器
<el-main>: 主要区域容器
<el-footer>: 底部容器
以上组件采用了flex布局，使用前请确认目标浏览器是否兼容，此外，<el-container>的子元素只能是后四者，后四者的父元素也只能是<el-container>
Basic组件规范：
颜色：主色，辅助色，中性色
字体：字体，字号，行高
边框：实线，虚线，圆角，投影
Button按钮
Button按钮和Link文字一样，有固定的样式
<el-button type="primary" >按钮</el-button>
使用plain属性，可以实现镂空效果，使用disabled属性，可以禁用：
<el-button type="primary" plain ></el-button>
PS：round实现椭圆，circle实现圆；
使用type="text"可以将button转换成纯文本按钮：
<el-button type="text">文字按钮</el-button>
使用<el-button-group>可以将多个按钮设置成组合按钮：
<el-button-group>
<el-button class="el-icon-arrow-left">上一页</el-button>
<el-button>下一页<i class="el-icon-arrow-right"/></el-button>
</el-button-group>
使用 ：loading="true"实现加载中的效果
<el-button :loading="true" type="primary">加载中</el-button>
使用size="small"等属性，实现三种大小：
<el-button type="info" size="mini">按钮</el-button>
Radio和Checkbox
1.单选框radio
<el-radio v-model="sex" label="1">男</el-radio>
<el-radio v-model="sex" label="2">女</el-radio>
data(){
return {
sex : '1'
}
}
PS: 这里v-model和sex进行双向绑定，label相当于value,且和sex值一致则首选；
2. 使用群组单选框，可以将双向绑定置顶操作，具体如下：
<el-radio-group v-model="city">
<el-radio :label="1">北京</el-radio>
<el-radio :label="2">上海</el-radio>
<el-radio :label="3">广州</el-radio>
</el-radio-group>
data(){
return {
city : 1
}
}
PS: 如果想禁用设置：disabled; 如想带有边框设置：border;
3.可以使用el-radio-button实现按钮式单选框，size可以设置大小
<el-radio-button label="1" >北京</el-radio-button>
PS: 可以在群组el-radio-button设置size属性，值为：medium/ samll /mini；
4.单选框或群组单选都具有change事件，改变后即可出发；
<el-radio-group v-model="city" @change="radioChange">
Checkbox复选框
<el-checkbox-group v-model="checkList">
<el-checkbox label="音乐"></el-checkbox>
<el-checkbox label="体育"></el-checkbox>
<el-checkbox label="电脑"></el-checkbox>
</el-checkbox-group>
return {
checkList ：['音乐','体育']
}
PS：单一复选框，比如协议确定，就直接使用el-checkbox不需要群组；
6.使用 :max/ :min，可选择最大/最小的勾选数量；
<el-checkbox-group v-model="checkList" :max="2"></el-checkbox-button>
7.和单选框一样，支持使用el-checkbox-button样式；
<el-checkbox-button label="音乐"></el-checkbox-button>
8.事件和radio一样，支持change, 具体如下：
<el-checkbox-group v-model="checkList" @change="radioChange"></el-checkbox-button>
PS: 其余和单选框类似，注意button样式和普通样式的属性区别；
Input输入框
基础输入框Input,带双向绑定；
<el-input v-model="input" placeholder="请输入内容"></el-input>
data() {
return {
input : ' '
}
}
使用clearable属性，提供框内清空按钮，使用show-password实现密码框；
<el-input v-model="input" clearable></el-input>
<el-input v-model="input" show-password></el-input>
使用maxlength属性，设置输入限制；
<el-input v-model="input" maxlength="10" show-word-limit></el-input>
使用prefix-icon设置前缀内置图标；使用suffix-icon设置后缀内置图标；
前置图标：<el-input prefix-icon="el-icon-search"></el-input>
后置图标：<el-input suffix-icon="el-icon-date"></el-input>
PS: 支持slot方式，具体如下：
<el-input>
<i slot="suffix" class="el-input_icon" el-icon-date></i>
</el-input>
使用type="textarea"，可以将输入框设置成文本域；
<el-input type="textarea" v-model="textarea"></el-input>
PS: 使用属性autosize可以自动扩展其高度
复合型输入框
使用<template>可以实现复合型输入库；
<el-input>
<template slot="append"></template>
</el-input>
PS: 和之前的表单一样可以使用size来设置尺寸；
可以通过输入库激活或输入的方式匹配数据列表内的相关信息；
<el-autocomplete :fetch-suggestions="querySearch" v-model="state">
</el-autocomplete>
PS: 这里相关的方法：querySearch和自动载入的loadAll()直接复制即可，固定格式；
PS： 关于事件，输入框有：focus/blur/select; 自动完成有select/change;
InputNumber计数器框
1.基础InputNumber计数器，带双向绑定；
<el-input-number v-model="number"></el-input-model>
data() {
return {
number ：' '
}
}
使用 :max / :min限制最大值和最小值，支持change事件；
<el-input-number v-model="number" :min="1" :max="5" @change="change" />
change(e) {
console.log(e)
}
PS: 设置disabled禁用，设置:step=1为增减步长，设置 :precision=2为小数点精度
<el-input-number v-model="number" :step="1" :precision="2" >
</el-input-number>
事件支持：change/blur/focus，方法支持：focus/select(区别：无回调)
select选择器
1.基础select选择器，具体如下：
<el-row>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value" ></el-option>
</el-select>
</el-row>
data () {
return {
value: ' ',
option : [
{
value : 1,
label ：'北京'
},
{
value : 2,
label ：'上海'
},
{
value : 3,
label ：'广州'
}
]
}
}
关于禁用，有两种：1.在el-select设置；2.在el-option设置；
<el-select v-model="value" placeholder="请选择" disabled>
或
<el-option :disabled="item.value === 1"></el-option>
使用clearable属性，清空选择的项目；使用multiple,实现多选项目；
<el-select v-model="value" placeholder="请选择" clearable multiple>
使用filterable属性，执行选择项搜索；
<el-select v-model="value" placeholder="请选择" fillterable>
Cascader选择器
1.默认是通过click点击来实现菜单的展开，我们也可以设置为hover悬浮
<el-cascader v-model="value" :options="options" :props="{ expandTrigger : 'hover' }">
2.使用disabled和clearable，禁用和清空，和Select选择器一样
<el-cascader v-model="value" :options="options" clearable disabled>
3.使用: show-all-levels来限制获取到的是最后一级的内容，设置false即可
<el-cascader v-model="value" :options="options" :show-all-levels="false" :props="props">
data() {
return {
props ：{
multiple : true
},
}
}
Switch开关
基础的switch开关，具体如下：
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ccc" active-text="打开" inactive-text="关闭">
</el-switch>
data () {
return {
value : true
}
},
除了Boolean类型，也可以是String或Number类型；
< el-switch v-model="value"
active-color="#13ce66"
inactive-color="#cccccc"
active-value="100"
inactive-value="0"
@change="switchChange" >
</el-switch>
data () {
return {
value : '0'
}
}，
Slider滑块
基础Slider滑块，具体如下：
<el-slider v-model="value"></el-slider>
data () {
return {
value : 0
}
}
使用 : show-tooltip实现隐藏文本提示，: format-tooltip实现自定义格式化；
<el-slider v-model="value2" :show-tooltip="false">
</el-slider>
<el-slider v-model="value2" :format-tooltip="formatTooltip">
</el-slider>
methods : {
formatTooltip(value) {
return value / 100
}
}
使用show-input可自带输入框；
<el-slider v-model="value" show-input>
</el-slider>
使用range实现范围选择；
<el-slider v-model="value6" range :min="1" :max="10">
</el-slider>
value6 : [4,6]
使用：step实现离散效果，再使用show-stops实现断点效果；
<el-slider v-model="value4" :step="10">
</el-slider>
<el-slider v-model="value5" :step="10" show-stops>
</el-slider>
TimePicker时间选择器
选择一个固定的时间点，具体如下：
<el-time-select v-model="value" :picker-options="{
start : '08:30',
step : '00:15',
end : '18：30'
}" placeholder="选择时间" />
data () {
return {
value : ' '
}
}
选择一个任意时间点，具体如下：
< el-time-picker v-model="value2" arrow-control :picker-options="{
selectableRange : '18:30:00 - 20:30:00'
}">
</el-time-picker>
PS: arrow-control属性可开启箭头选择，而selectableRange是限制时间范围；
丰富的任意时间范围，具体如下：
< el-time-picker v-model="value3"
is-range
range-separator="至"
start-placeholder='开始时间'
end-placeholder='结束时间'
</el-time-picker>
PS: is-range开启丰富的任意时间范围，其它字面意思
PS：属性方法和之前组件类似
DatePicker日期选择器
选择一个基础的
<el-date-picker v-model="value">
</el-date-picker>
data () {
return {
value : ' '
}
}
可以设置一个type属性，设置获取的值
<el-date-picker v-model="value"
type="date"
placeholder="选择日期"/>
PS: type设置为datetime，可以获取到日期+时间
自定义快捷选项的日期选择，具体如下；
<el-date-picker v-model="value"
type="datetime"
placeholder="选择日期"
:picker-options="getPicker"/>
data () {
return {
value : ' ',
getPicker : {
//shortcuts是固定名称，表示设置快捷键
shortcuts : [{
text : '今天',
onClick (obj) {
obj.$emit('pick',new Date() )
}
},{
text : '昨天',
onClick (obj) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24)
obj.$emit('pick',date )
}
},{
text : '明天',
onClick (obj) {
const date = new Date();
date.setTime(date.getTime() + 3600 * 1000 * 24)
obj.$emit('pick',new Date() )
}
}
]
}
}
}
选定一个日期范围，具体如下：
<el-date-picker v-model="value2"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
选定一个日期，并进行格式化，具体如下：
<el-date-picker v-model="value"
type="datetime"
placeholder="选择日期"
format="yyyy年MM月dd日"
:picker-options="getPicker" />
</el-date-picker>
