简介
element-ui是一个不依赖于vue的ui库。不过，它是目前使用Vue进行项目开发时使用的一个更好的UI框架。
布局布局（el-row、el-col）
Element-ui 借鉴了Bootstrap 框架的思想并使用网格布局。将一列拆分为24 列。基本用法如下
埃尔线
el-col :span='6'div class='grid-content bg-purple'/div/el-col
el-col :span='6'div class='grid-content bg-purple'/div/el-col
el-col :span='6'div class='grid-content bg-purple'/div/el-col
el-col :span='6'div class='grid-content bg-purple'/div/el-col
/L线
Span属性：表示该列占据的格子数量。
offset属性：表示col的相对偏移数。
容器布局容器
这些布局容器通常用作div。
el-container：外容器。如果子元素包含el-header 或el-footer，则所有子元素从上到下垂直对齐，否则它们将左右水平对齐。
el-header：顶栏容器
el-footer：底部栏容器
el-aside：侧边栏容器
el-main：页面主视图
使用图标
element-ui 允许您使用类创建图标。
例如，编辑图标可以表示为：
i 类='el-icon-edit'/i
按钮（L按钮）
按钮用el-button表示
按钮被分类，每种类型对应不同的按钮。
按钮类型可以具有以下值：“主要”、“成功”、“警告”、“信息”和“危险”。
plain：确定按钮是否使用plain系列。
round：确定按钮是否显示为圆角。
div 类='flexbox'
h2 各种按钮/h2
el-row class='flex1 margin-left10'
el-col :span='3'el-button默认按钮/el-button/el-col
el-col :span='3'el-button type='primary' 主按钮/el-button/el-col
el-col :span='3'el-button type='success'成功按钮/el-button/el-col
el-col :span='3'el-button type='warning' 警告按钮/el-button/el-col
el-col :span='3'el-button plaindefault 按钮/el-button/el-col
el-col :span='3'el-buttonround默认按钮/el-button/el-col
/L线
/div
级联选择（el-cascader）
//组件
埃尔卡斯奎德
:options='选项'
v-model='所选选项'
@change='处理变更'
/埃尔卡卡德
//数据数据
选项： [{
值：'1',
label:'组件',
孩子： [{
label:'输入'
},{
label:“刷卡器”
}]
},{
值：'1',
label:'查看'
},{
值：'1',
label:'行动'
}]
TimePicker 时间选择器
picker-options 是一个对象。
该对象的属性包括start、step、end、selectableRange等。
设置selectableRange 属性提供了一个可供选择的时间点。
埃尔泰姆选择
v-model='值1'
第：章
开始：'08:30',
步骤：'00:15',
结束：'18:30'
}'
placeholder='选择时间'
/el-时间选择
日期选择器
日期选择器的类型属性决定选择的类型：日、周、月或年。
埃尔日期选择器
v-model='起息日'
类型='日期'
placeholder='选择日期'
/el - 日期选择器
埃尔日期选择器
类型='周'
v-model='值'
placeholder='选择周'
/el - 日期选择器
DateTimePicker 日期时间选择器
本质就是将类型改为datetime。
埃尔日期选择器
v-model='值1'
type='日期和时间'
placeholder='选择日期和时间'
/el - 日期选择器
形式形式
element-ui form表单组件：el-form
element-ui 中的formItem 组件：el-form-item
这是一个简单的表单实现：
el-form :model=''
el-form-item label='用户名'
左输入/左输入
/El 表单项
el-form-item label='密码'
左输入/左输入
/El 表单项
/埃尔福尔
表单也有验证功能。表单规则用于验证。
桌子
el-table：元素ui表。
el-table-column：element-ui中table对应的Column。
表格属性：条纹属性允许您创建斑马图案表格。
对于表格属性：您可以使用边框属性创建斑马图案表格。
对于表格属性：高度属性允许您实现具有固定表头的表格。
埃尔表
:data='表数据'
样式='width: 100%'
高度='200'
el-table-column 固定宽度='120' label='date' prop='date'/el-table-column
el-table-column width='120' label='name' prop='name'/el-table-column
el-table-column width='360' label='address' prop='address'/el-table-column
/el-表
旋转木马旋转灯笼
其实就相当于一个轮播
type 属性：允许将轮播转换为卡片
Interval属性：定义轮播切换的频率。
El 轮播高度='150px'
el-carousel-item v-for='第4 项' :key='项目'
h3{{项目}}/h3
/el-旋转木马-项目
/埃尔旋转木马
折叠折叠面板
折叠面板的el-collapse-item 需要一个title 属性。
el-collapse-item title='一致性' name='1'
div 与现实世界一致。它与现实世界的流程和逻辑一致，遵循用户熟悉的语言和概念。
div 在界面内是一致的。所有元素和结构应保持一致，包括设计风格、图标和文本以及元素定位。 /div
/el-折叠-项目
导航导航
埃尔菜单
el-menu：代表导航菜单的框。
el-submenu：表示导航菜单中的子框选项。
el-menu-item：表示导航菜单中的每个项目。
其中，submenu和munuiitem都用作属性索引。
el-menu :default-active='activeIndex' class='el-menu-demo' mode='horizontal' @select='handleSelect'
el-menu-itemindex='1'处理中心/el-menu-item
el-子菜单索引='2'
templateslot='title'我的工作台/模板
el-menu-item 索引='2-1' 选项1/el-menu-item
el-menu-item 索引='2-2' 选项2/el-menu-item
el-menu-item 索引='2-3' 选项3/el-menu-item
/el-子菜单
el-menu-itemindex='3'订单管理/el-menu-item
/El 菜单
埃尔塔布
el-tabs v-model='activeName'
el-tab-pane label='用户管理' name='first'
用户管理
/el-tab 窗格
/el-tab
树树控件
data属性：代表树组件的渲染。
el-tree :data='data' :props='defaultProps' @node-click='handleNodeClick'/el-tree
Vue学习示例demo
在Vue研究中，这个系统非常庞大，包括Vue生命周期、Vue指令和事件、Vue组件值传递、Vuex使用、Vue路由器等等。
学习Vue的基本示例笔记：https://github.com/liwudi/Vue.git
Vue学习项目演练
基于Vue、vuex、axios、vue-router的电商项目模板：
https://github.com/liwudi/VueProject.git
https://github.com/liwudi/manage-platform.git
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。
