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>