[TOC]
1、Element 基本使用
1.1、Element介绍
- Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
- 使用Element前提必须要有Vue。
- 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
- Element官网：https://element.eleme.cn/#/zh-CN
- 自己完成的按钮
- Element 提供的按钮
1.2、Element快速入门
- 开发步骤
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>快速入门</title> <!-- TODO: 1. 先导入vue 2. 在导入element的css和js索引 --> <script src="../js/vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="../element-ui/lib/index.js"></script> </head> <body> <input type="button" value="按钮"> <br><br> <!-- TODO: elementUI是基于vue编写的组件库, 可以快速的搭建网页 1. element的自定义标签 1). el-row : 每个标签为一行 2). el-button : 按钮标签 (elementui底层设置了css样式) --> <div id="div"> <el-row> <el-button >默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <br> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> <br> <el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>危险按钮</el-button> </el-row> <br> <el-row> <el-button icon="el-icon-eleme" circle></el-button> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>
1.3、基础布局
将页面分成最多 24 个部分，自由切分。
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基础布局</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js/vue.js"></script> <script src="../element-ui/lib/index.js"></script> <style> .el-row { /* 行距为20px */ margin-bottom: 20px; } .bg-purple-dark { background: red; } .bg-purple { background: blue; } .bg-purple-light { background: green; } .grid-content { /* 边框圆润度 */ border-radius: 4px; /* 行高为36px */ min-height: 36px; } </style> </head> <body> <div id="div"> <!-- 通过基础的 24 分栏，迅速简便地创建布局。 1. el-row : 行 2. el-col : column 列 --> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></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-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>
1.4、容器布局
将页面分成头部区域、侧边栏区域、主区域、底部区域。
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>容器布局</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js/vue.js"></script> <script src="../element-ui/lib/index.js"></script> <style> .el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; 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: 160px; } body > .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; } </style> </head> <body> <div id="div"> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>
1.5、表单组件
由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。
代码实现 ```html <!DOCTYPE html>
<!-- el-form 1. model : 数据 2. rules : 规则 3. ref : 当前form的标识(id) --> <el-form :model="ruleForm" :rules="rules" ref="xx" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('xx')">立即创建</el-button> <el-button @click="resetForm('xx')">重置</el-button> </el-form-item> </el-form><a name="75f260b0"></a> ## 1.6、表格组件 用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。 - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格组件</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js/vue.js"></script> <script src="../element-ui/lib/index.js"></script> </head> <body> <div id="div"> <template> <!-- el-table : 1. data : 绑定data中的数据 2. 在此表格中,无需声明行,声明列即可(行数跟数组的长度相关) el-table-column: 1. prop : 写的是绑定数据中的属性 --> <el-table :data="tableData" :stripe="true" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> </div> </body> <script> new Vue({ el:"#div", data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }); </script> </html>1.7、导航栏组件
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>顶部导航栏</title> <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"> <script src="../js/vue.js"></script> <script src="../element-ui/lib/index.js"></script> </head> <body> <div id="div"> <!-- background-color : 背景色 颜色两种表示 1). 英文单词 2). RGB (red, green, blue 光三原色) I. 每个颜色取值(0~255) 00 ~ ff(16进制) II. 标准 #00ff00 省略 # 0f0 text-color : 文本颜色 active-text-color : 被激活的文本颜色 default-active : 默认激活项 mode : 模式 horizontal 水平线 hr vertical 垂直 (默认) @select 事件绑定 v-on:select 1. 触发时机 : 当选项被选中时 --> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-menu-item index="5">用户中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> </div> </body> <script> new Vue({ el:"#div", data() { return { activeIndex: '1', activeIndex2: '5' }; }, methods: { /* key : 当前选中项索引 key-path: 当前选中项的路径 */ handleSelect(key, keyPath) { console.log(key, keyPath); } } }); </script> </html>
1.8、小结
- Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。
- 使用Element前提必须要有Vue。
- 使用步骤
1.下载Element核心库。
2.引入Element样式文件。
3.引入Vue核心js文件。
4.引入Element核心js文件。
5.借助常用组件编写网页。 - 常用组件
网页基本组成部分，布局、按钮、表格、表单等等~~~
常用组件不需要记住，只需要在Element官网中复制使用即可。
2、界面案例 学生列表
2.1、案例效果和分析
2.2、头部区域的实现
- 实现思路
- 头部效果实现。
- 侧边栏和主区域效果实现。
- 代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学生列表</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-header{ background-color: #545c64; } .header-img{ width: 100px; margin-top: 20px; } </style> </head> <body> <div id="div"> <el-container> <!-- 头部 --> <el-header class="el-header"> <el-container> <div> <el-image src="img/export.png" class="header-img"></el-image> </div> <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="white" active-text-color="#ffd04b" style="margin-left: auto;"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item> </el-menu> </el-container> </el-header> </el-container> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>
2.3、侧边栏区域的实现
<!-- 侧边栏区域 --> <el-container style="height: 580px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-menu"></i>学工部</template> <el-menu-item-group> <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item> <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item> <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>咨询部</template> <el-menu-item-group> <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item> <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item> <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-menu"></i>教研部</template> <el-menu-item-group> <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item> <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item> <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> </el-container>2.4、主区域的实现
主区域和侧边栏区域放在一起
<!-- 主区域 --> <el-container> <el-main> <b style="color: red;font-size: 20px;">学生列表</b> <div style="float:right"> <el-button type="primary">添加学生</el-button> </div> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作" width="180"> <el-button type="warning">编辑</el-button> <el-button type="danger">删除</el-button> </el-table-column> </el-table> </el-main> </el-container>在vue中定义data
<script> new Vue({ el:"#div", data:{ tableData:[ { date:"2088-08-08", name:"张三", address:"北京市昌平区" },{ date:"2088-08-08", name:"李四", address:"北京市昌平区" },{ date:"2088-08-08", name:"王五", address:"北京市昌平区" }, ] } }); </script>
若有收获，就点个赞吧
0 人点赞
