1、下载npm i element-ui -S
2、引入css样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
3、布局
父级盒子可以嵌套配置
el-row相当与div，可加属性：
：gutter="20" 栅格间隔;即padding值
type="flex" 添加弹性盒子布局
justify=“start” flex布局的排列方式 start/end/center/space-around/space-between
align=“top” flex 布局下的垂直排列方式 top/middle/bottom 上/中/下
tag=“ul” 自定义标签
el-col是在el-row的下的div，属性可加：
：span = "24" 24等分
：offset=“1” 栅格左侧的间隔格数1份 margin-left
：push=“1” 栅格向右移动格数1份 定位left
：pull="1" 栅格向左移动格数1份 定位right
tag 自定义标签
响应式布局：
：xs=“1” <768px 1份
：sm=“2” ≥768px 2份
：md=“3” ≥992px 3份
：lg=“4” ≥1200px 4份
：xl=“5” ≥1920px 5份
<el-container>：外层容器。当子元素中包含
<el-header> 或
<el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
属性：direction 子元素中有
el-header 或
el-footer 时为 vertical，否则为 horizontal
<el-header>：顶栏容器。
属性：height 高度
<el-aside>：侧边栏容器。
属性：width 宽度
<el-main>：主要区域容器。
<el-footer>：底栏容器。
属性：height 高度
4、图标icon
http://element.eleme.io/#/zh-CN/component/icon
5、按钮
el-button属性：
size="medium" medium / small / mini 中等、小型、超小
type="primary" primary / success / warning / danger / info / text 更改背景颜色
plain true、false 是否为朴素按钮（貌似没啥用）
round true、false 是否为圆角
loading true、false 是否为加载中状态（点不了的按钮有啥用）
disabled true、false 是否禁用
icon=“” 图标类名 在按钮上添加图标
autofocus true、false 是否默认聚焦
native-type button / submit / reset 原生 type 属性
6、Radio 单选框
可以用v-model绑定属性，进行判断选中状态
radio的事件：
change 绑定值变化时触发的事件 例子：@change="执行函数"
el-radio属性：
label Radio的value 也就是v-model绑定的标识
disabled true、false 是否禁用
border true、false 是否显示边框
size=“” medium / small / mini 尺寸，仅在 border 为真时有效
name 原生 name 属性
el-radio-group属性： 注：包裹radio组的容器
size=“” medium / small / mini 改变所有子级带border属性的大小
disabled true、false 是否禁用 此群组所有的radio都被禁用
text-color="" 颜色 激活时按钮文本颜色（注意是按钮）
fill="" 颜色 激活改变按钮的边框与背景色（注意是按钮）
el-radio-group事件
@change=“执行函数”
el-radio-button 按钮radio
label Radio的value 也就是v-model绑定的标识
disabled 是否禁用
name 原声name属性
7、checkbox多选框
v-model可以绑定数组，控制那些checkbox为勾选状态
checkbox，Checkbox-button属性：
size=“” medium / small / mini 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效
disabled true、false 是否禁用
true-label 选中的值 （啥意思？）
false-label 没有选中时的值 （啥意思？）
border true、false 显示边框
name 原生 name 属性
checked true、false 当前是否勾选 加上：为false也会变，只是初始默认值
indeterminate true、false 设置 indeterminate 状态，只负责样式控制
Checkbox 事件
@change="执行函数"
Checkbox-group属性：
：max 可以控制被勾选的项目的数量。（最大）
size=“” medium / small / mini 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效
disabled true、false 是否禁用
text-color 颜色 按钮形式的 Checkbox 激活时的文本颜色
fill 颜色 按钮形式的 Checkbox 激活时的填充色和边框色
Checkbox-group事件：
@change=“执行函数”
8、input输入框
input属性：
type text / textarea input的类型 单行文本与多行文本
value=“” 输入框中的值 绑定值
：maxlength 原生属性，最大输入长度
：minlength 原生属性，最小输入长度
placeholder 输入框占位文本
clearable true、false 是否可清空
disabled true、false 是否禁用
size=“” medium / small / mini 输入框尺寸，只在
type!="textarea" 时有效
prefix-icon=“图标的类名” 输入框头部图标
suffix-icon=“图标的类名” 输入框尾部图标
rows 输入框行数，只对
type="textarea" 有效 默认2
autosize 自适应内容高度，只对
type="textarea"有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
auto-complete 原生属性，自动补全
name 原生属性
readonly true、false 原生属性，是否只读 不能输入值
：max 原生属性，设置最大值
：min 原生属性，设置最小值
step 原生属性，设置输入字段的合法数字间隔
resize none, both, horizontal, vertical 控制是否能被用户缩放
autofocus true, false 原生属性，自动获取焦点
form 原生属性
label 输入框关联的label文字
tabindex 输入框的tabindex（不造啥意思）
Input slots属性：
prefix 输入框头部内容，只对
type="text" 有效
suffix 输入框尾部内容，只对
type="text" 有效
prepend 输入框前置内容，只对
type="text" 有效
append 输入框后置内容，只对
type="text" 有效
例子：
<el-input>
<i slot="prefix">111</i>
</el-input>
Input事件：
blur 在 Input 失去焦点时触发
focus 在 Input 获得焦点时触发
change 在 Input 值改变时触发
clear 在点击"clearable"属性生成的清空按钮时触发
Input方法
focus 使 input 获取焦点（莫名奇妙？？？）
el-autocomplete属性：（可带输入建议的输入框组件，
fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中）
disabled boolean 禁用
placeholder 输入框占位文本
value-key 输入建议对象中用于显示的键名
value 必填值，输入绑定值
debounce 获取输入建议的去抖延时
fetch-suggestions 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 Function(queryString, callback) （暂时未看）
popper-class Autocomplete 下拉列表的类名
trigger-on-focus 是否在输入框 focus 时显示建议列表
name 原生属性
select-when-unmatched 在输入没有任何匹配建议的情况下，按下回车是否触发
select 事件
label 输入框关联的label文字
prefix-icon 输入框头部图标
suffix-icon 输入框尾部图标
Autocomplete slots属性：
name 说明
prefix 输入框头部内容
suffix 输入框尾部内容
prepend 输入框前置内容
append 输入框后置内容
Autocomplete Events：
select 点击选中建议项时触发
9、inputNumber计数器
el-input-number属性：
value 绑定值
：min 设置计数器允许的最小值
：max 设置计数器允许的最大值
step 计数器步长
size large, small 计数器尺寸
disabled boolean 是否禁用计数器
controls boolean 是否使用控制按钮
controls-position right 控制按钮位置
name 原生属性
label 输入框关联的label文字
事件：
change 绑定值被改变时触发
blur 在组件 Input 失去焦点时触发
focus 在组件 Input 获得焦点时触发
Methods方法：
focus 使 input 获取焦点
10、Select 选择器
el-select属性：
multiple boolean 是否多选
disabled boolean 是否禁用
value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填
size medium/small/mini 输入框尺寸
clearable boolean 单选时是否可以清空选项
collapse-tags boolean 多选时是否将选中值按文字的形式展示
multiple-limit number 多选时用户最多可以选择的项目数，为 0 则不限制
name select input 的 name 属性
auto-complete select input 的 autocomplete 属性
placeholder 占位符
filterable boolean 是否可搜索
allow-create boolean 是否允许用户创建新条目，需配合
filterable 使用
filter-method function 自定义搜索方法
remote boolean 是否为远程搜索
remote-method function 远程搜索方法
loading boolean 是否正在从远程获取数据
loading-text 加载中 远程加载时显示的文字
no-match-text 无匹配数据 搜索条件无匹配时显示的文字
no-data-text 无数据 选项为空时显示的文字
popper-class Select 下拉框的类名
reserve-keyword boolean 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
default-first-option boolean 在输入框按下回车，选择第一个匹配项。需配合
filterable 或
remote 使用
popper-append-to-body boolean 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
Select Events（事件）：
change 选中值发生变化时触发
visible-change 出现则为 true，隐藏则为 false 下拉框出现/隐藏时触发
remove-tag 多选模式下移除tag时触发
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发
focus 当 input 获得焦点时触发
el-option选择条数，属性：
value 选项的值
label 选项的标签，若不设置则默认与
value 相同
disabled boolean 是否禁用该选项
Option Group属性：
label 分组的组名
disabled 是否将该分组下所有选项置为禁用
Methods：
focus 使 input 获取焦点
11、Cascader 级联选择器
el-cascader属性：
optios array 可选项数据源，键名可通过
props 属性配置
props object 配置选项，具体见下表
value array 选中项绑定值
separator 默认/ 选项分隔符
popper-class 自定义浮层类名
placeholder 输入框占位文本
disabled boolean 是否禁用
clearable boolean 是否支持清空选项
expand-trigger click / hover 次级菜单的展开方式
show-all-levels boolean 输入框中是否显示选中值的完整路径
filterable boolean 是否可搜索选项
debounce number默认300 搜索关键词输入的去抖延迟，毫秒
change-on-select boolean 是否允许选择任意一级的选项
size medium / small / mini 尺寸
before-filter function(value) 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选
props属性：
value 指定选项的值为选项对象的某个属性值
label 指定选项标签为选项对象的某个属性值
children 指定选项的子选项为选项对象的某个属性值
disabled 指定选项的禁用为选项对象的某个属性值
Events事件：
change 当绑定值变化时触发的事件
active-item-change 当父级选项变化时触发的事件，仅在
change-on-select 为
false 时可用
blur 在 Cascader 失去焦点时触发
focus 在 Cascader 获得焦点时触发
12、switch开关
el-switch属性：
disabled boolean 是否禁用
width number默认40 switch 的宽度（像素）
active-icon-class switch 打开时所显示图标的类名，设置此项会忽略
active-text
inactive-icon-class switch 关闭时所显示图标的类名，设置此项会忽略
inactive-text
active-text switch 打开时的文字描述
inactive-text switch 关闭时的文字描述
active-value boolean / string / number switch 打开时的值
inactive-value boolean / string / number switch 关闭时的值
active-color switch 打开时的背景色
inactive-color switch 关闭时的背景色
name switch 对应的 name 属性
Events事件：
change switch 状态发生变化时的回调函数
Methods方法：
focus 使 Switch 获取焦点
13、slider滑块
可以用v-model绑定一个数组，显示范围，例：【4，8】
el-slider属性：
min 最小值
max 最大值
disabled boolean 是否禁用
step number默认1 步长
show-input boolean 是否显示输入框，仅在非范围选择时有效
show-input-controls boolean 在显示输入框的情况下，是否显示输入框的控制按钮
input-size large / medium / small / mini 输入框的尺寸
show-stops boolean 是否显示间断点
show-tooltip boolean 是否显示 tooltip
format-tooltip function(value) 格式化 tooltip message
range boolean 是否为范围选择
vertical boolean 是否竖向模式
height Slider 高度，竖向模式时必填
label 屏幕阅读器标签
debounce number默认300 输入时的去抖延迟，毫秒，仅在
show-input等于true时有效
tooltip-class tooltip 的自定义类名
Events事件：
change 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
14、TimePicker 时间选择器
el-time-select属性：
readonly boolean 完全只读
disabled boolean 禁用
editable boolean 文本框可输入
clearable boolean 是否显示清除按钮
size medium / small / mini 输入框尺寸
placeholder 非范围选择时的占位内容
start-placeholder 范围选择时开始日期的占位内容
end-placeholder 范围选择时开始日期的占位内容
is-range boolean 是否为时间范围选择，仅对
<el-time-picker>有效
arrow-control boolean 是否使用箭头进行时间选择，仅对
<el-time-picker>有效
value date(TimePicker) / string(TimeSelect) 绑定值
align left / center / right 对齐方式
popper-class TimePicker 下拉框的类名
picker-options object 当前时间日期选择器特有的选项参考下表
range-separator 选择范围时的分隔符
value-format 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象
default-value 可被
new Date()解析(TimePicker) / 可选值(TimeSelect) 可选，选择器打开时默认显示的时间
name 原生属性
prefix-icon 自定义头部图标的类名
clear-icon 自定义清空图标的类名
Time Select Options属性：
start 开始时间
end 结束时间
step 间隔时间
minTime 最小时间，小于该时间的时间段将被禁用
maxTime 最大时间，大于该时间的时间段将被禁用
Time Picker Options属性：
selectableRange 可选时间段，例如
'18:30:00 - 20:30:00'或者传入数组
['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']
format 小时：
HH，分：
mm，秒：
ss，AM/PM
A 时间格式化(TimePicker)
Events事件：
change 用户确认选定的值时触发
blur 当 input 失去焦点时触发
focus 当 input 获得焦点时触发
Methods方法：
focus 使 input 获取焦点
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
