elementui框架中文网，vue-element-ui

介绍

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