文章目录
4. ElementUI
4.1 ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：http://element-cn.eleme.io/#/zh-CN
传智健康项目后台系统就是使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用，如下：
<!-- 引入ElementUI样式 --><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><!-- 引入ElementUI组件库 --><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>4.2 常用组件
4.2.1 Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含<el-header> 或<el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器
<body><divid="app"><el-container><el-header>Header</el-header><el-container><el-asidewidth="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div><style>.el-header, .el-footer{background-color: #B3C0D1;color: #333;text-align: left;line-height: 60px;}.el-aside{background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main{background-color: #E9EEF3;color: #333;text-align: center;line-height: 590px;}</style></body><script>newVue({
el:'#app'});</script>4.2.2 Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
<el-dropdownsplit-buttonsize="small"trigger="click">
个人中心<el-dropdown-menu><el-dropdown-item>退出系统</el-dropdown-item><el-dropdown-itemdivided>修改密码</el-dropdown-item><el-dropdown-itemdivided>联系管理员</el-dropdown-item></el-dropdown-menu></el-dropdown>4.2.3 NavMenu 导航菜单
为网站提供导航功能的菜单。
<el-menu><el-submenuindex="1"><templateslot="title"><iclass="el-icon-location"></i><spanslot="title">导航一</span></template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu><el-submenuindex="2"><templateslot="title"><iclass="el-icon-menu"></i><spanslot="title">导航二</span></template><el-menu-item>选项1</el-menu-item><el-menu-item>选项2</el-menu-item><el-menu-item>选项3</el-menu-item></el-submenu></el-menu>4.2.4 Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
<el-table:data="tableData"stripe><el-table-columnprop="date"label="日期"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnlabel="操作"align="center"><!--
slot-scope：作用域插槽，可以获取表格数据
scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
--><templateslot-scope="scope"><el-buttontype="primary"size="mini"@click="handleUpdate(scope.row)">编辑</el-button><el-buttontype="danger"size="mini"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><script>newVue({
el:'#app',
data:{
tableData:[{
date:'2016-05-02',
name:'王小虎',
address:'上海市普陀区金沙江路 1518 弄'},{
date:'2016-05-04',
name:'王小虎',
address:'上海市普陀区金沙江路 1517 弄'},{
date:'2016-05-01',
name:'王小虎',
address:'上海市普陀区金沙江路 1519 弄'}]},
methods:{handleUpdate(row){alert(row.date);},handleDelete(row){alert(row.date);}}});</script>4.2.5 Pagination 分页
当数据量过多时，使用分页分解数据。
<!--
current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
--><el-pagination@current-change="handleCurrentChange"current-page="5"page-size="10"layout="total, prev, pager, next, jumper":total="305"></el-pagination><script>newVue({
el:'#app',
methods:{handleCurrentChange(page){alert(page);}}});</script>4.2.6 Message 消息提示
常用于主动操作后的反馈提示。
<el-button:plain="true"@click="open1">消息</el-button><el-button:plain="true"@click="open2">成功</el-button><el-button:plain="true"@click="open3">警告</el-button><el-button:plain="true"@click="open4">错误</el-button><script>newVue({
el:'#app',
methods:{open1(){this.$message('这是一条消息提示');},open2(){this.$message({
message:'恭喜你，这是一条成功消息',
type:'success'});},open3(){this.$message({
message:'警告哦，这是一条警告消息',
type:'warning'});},open4(){this.$message.error('错了哦，这是一条错误消息');}}})</script>4.2.7 Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
<h3>基础的、简洁的标签页</h3><!--
通过value属性来指定当前选中的标签页
--><el-tabsvalue="first"><el-tab-panelabel="用户管理"name="first">用户管理</el-tab-pane><el-tab-panelabel="配置管理"name="second">配置管理</el-tab-pane><el-tab-panelabel="角色管理"name="third">角色管理</el-tab-pane><el-tab-panelabel="定时任务补偿"name="fourth">定时任务补偿</el-tab-pane></el-tabs><h3>选项卡样式的标签页</h3><el-tabsvalue="first"type="card"><el-tab-panelabel="用户管理"name="first">用户管理</el-tab-pane><el-tab-panelabel="配置管理"name="second">配置管理</el-tab-pane><el-tab-panelabel="角色管理"name="third">角色管理</el-tab-pane><el-tab-panelabel="定时任务补偿"name="fourth">定时任务补偿</el-tab-pane></el-tabs><h3>卡片化的标签页</h3><el-tabsvalue="first"type="border-card"><el-tab-panelabel="用户管理"name="first">用户管理</el-tab-pane><el-tab-panelabel="配置管理"name="second">配置管理</el-tab-pane><el-tab-panelabel="角色管理"name="third">角色管理</el-tab-pane><el-tab-panelabel="定时任务补偿"name="fourth">定时任务补偿</el-tab-pane></el-tabs><script>newVue({
el:'#app'})</script>4.2.8 Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
<!--
rules：表单验证规则
--><el-formref="form":model="form":rules="rules"label-width="80px"><!--
prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
--><el-form-itemlabel="活动名称"prop="name"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="活动区域"prop="region"><el-selectv-model="form.region"placeholder="请选择活动区域"><el-optionlabel="区域一"value="shanghai"></el-option><el-optionlabel="区域二"value="beijing"></el-option></el-select></el-form-item><el-form-itemlabel="活动时间"><el-col:span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.date1"style="width: 100%;"></el-date-picker></el-col><el-colclass="line":span="2">-</el-col><el-col:span="11"><el-time-pickertype="fixed-time"placeholder="选择时间"v-model="form.date2"style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-itemlabel="即时配送"><el-switchv-model="form.delivery"></el-switch></el-form-item>