Element-编程知识

1、Element 基本使用

1.1、Element介绍

Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
使用Element前提必须要有Vue。
组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element官网：https://element.eleme.cn/#/zh-CN
自己完成的按钮
Element 提供的按钮

1.2、Element快速入门

开发步骤
1. 引入 Element 样式文件夹。
  
  引入组件库 (资料/element/element-ui 整个放到webapp路径，如果是静态工程就放到项目根目录)
2. 引入 Vue 核心 js 文件。
  
  在项目根目录下创建js文件夹，将课后资料中的vue.js文件放到该文件夹下
3. 在html中引入vue.js
4. 在html中引入 Element 核心 js 文件。
  
  说明：element组件库基于vue的,所以要先导入vue。在导入 Element 核心 js 文件。至于如何导入 Element 核心 js 文件，我们可以参考官网说明：
  
  从官网复制之后修改引入本地的文件
5. 编写按钮标签。
在官网中找到按钮标签的代码，将代码复制到html页面中：
1. 通过 Vue 核心对象加载元素。
```
<script>new Vue({el:"#div"});
</script>
```

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><!--element组件库基于vue的,先导入vue--><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>
<!--element组件库: 快速搭建网站效果
--><div id="div"><button>按钮标签</button><br><div><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></div><div style="margin: 20px 0"><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></div><div><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></div></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>
<!--一行最多24份,超过就失效
--><div id="div"><el-row><!--一行超过24份，就不显示了--><!--<el-col :span="25"><div class="grid-content bg-purple-dark"></div></el-col>--><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><!--一行被拆分为2列，每列12份--><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><!--一行被拆分为3列，每列8份--><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><!--一行被拆分为4列，每列6份--><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><!--一行被拆分为6列，每列4份--><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> 时，全部子元素会垂直上下排列，否则会水平左右排列。

代码实现

官方给出很多种，我们只演示其中一种即可，其余可以自己学习。

<!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: #d18e66;color: #333;text-align: center;height: 100px;}.el-aside {background-color: #55e658;color: #333;text-align: center;height: 580px;}.el-main {background-color: #5fb1f3;color: #333;text-align: center;height: 520px;}</style>
</head>
<body><div id="div"><!--表示外层容器--><el-container><!--包含子元素el-header，所以会垂直显示--><el-header>头部区域</el-header><!--表示外层容器又包含一个内部容器--><el-container><!--表示外层容器，不包含el-header或者el-footer,所以水平左右显示--><el-aside width="200px">侧边栏区域</el-aside><!--表示外层容器又包含一个内部容器--><el-container><el-main>主区域</el-main><!--包含子元素el-footer，所以会垂直显示--><el-footer>底部区域</el-footer></el-container></el-container></el-container></div>
</body>
<script>new Vue({el:"#div"});
</script>
</html>

1.5、表单组件(掌握)

在这里插入图片描述

由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

代码实现

表单组件也有很多种，我们这里讲解和演示一种比较强大的自带校验的表单组件，这样我们就不用像以前那样自己书写js代码校验表单了。

我们演示的表单组件如下：

在这里插入图片描述

说明：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并且 Form-Item 的 prop 属性设置为需校验的字段名即可。

复制上述表单组件到模板中，演示效果：

1.复制官网代码分两步进行复制，先复制视图即html标签

在这里插入图片描述

2.在复制脚本即js代码，复制js代码时需要注意如下：

在这里插入图片描述

注意：对于上述data(){return {}}解释：

在这里插入图片描述

<script>let a = {name:"zs",age:18}function b(){return {name:"zs",age:18 }}console.log(a);console.log(b());</script>

<!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"><!--1.:model="ruleForm"表示使用vue给form表单绑定model属性，属性值是ruleForm2.:rules="rules"表示使用vue给form表单绑定rules属性，属性值是rules，只需要通过 rules 属性传入约定的验证规则--><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--3.在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio4.Form-Item 的 prop 属性设置为需校验的字段名即可--><el-form-item label="活动名称" prop="name"><!--5.v-model="ruleForm.name" 这里使用的双向绑定，即输入框数据变化那么下面的vue中的：ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}name也会发生改变，而下面的name发生变化，输入框也会发生变化。这里当输入框输入数据之后例如输入向日葵，那么就会将向日葵放到ruleForm的name值中，这里的v-model="ruleForm.name"，ruleForm.name是找到ruleForm中的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 type="fixed-time" 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><!--6.@click="submitForm('ruleForm')" 表示给当前按钮button绑定一个点击事件，@click是v-on:click简写当单击立即创建按钮时触发函数submitForm，同时将vue中的data中的ruleForm所有数据传递到该函数中--><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><!--7.点击重置按钮，执行绑定的重置函数resetForm--><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</body>
<script>new Vue({el:"#div",data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [//trigger: 'blur' ：表示给name输入框绑定离焦事件{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}};},methods: {//点击立即创建按钮执行的函数submitForm(formName) {//formName=ruleFormthis.$refs[formName].validate((valid) => {if (valid) {//如果表单输入项都合法就弹出框输出submit，并且可以提交表单alert('submit!');} else {//说明 输入项是非法的，在控制台输出数据console.log('error submit!!');//阻止表单提交return false;}});},//重置表单resetForm(formName) {this.$refs[formName].resetFields();}}});
</script>
</html>

1.6、表格组件

在这里插入图片描述

用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

代码实现

在这里插入图片描述

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

1.先复制视图即html标签

在这里插入图片描述

2.再复制js代码

在这里插入图片描述

1.基础表格

<!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`元素中注入`data`对象数组后，在`el-table-column`中用`prop`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。1.el-table :data="tableData" :表示`el-table`元素中注入`data`的tableData对象数组--><el-table:data="tableData"style="width: 100%"><!--2.`el-table-column`中用`prop`属性来对应对象中的键名date即可填入数据3.用`label`属性来定义表格的列名4.可以使用`width`属性来定义列宽--><!--日期--><el-table-columnprop="date"label="日期"width="180"></el-table-column><!--姓名--><el-table-columnprop="name"label="姓名"width="180"></el-table-column><!--地址--><el-table-columnprop="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>

2.带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。

在这里插入图片描述

3.带边框表格

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

在这里插入图片描述

1.7、导航栏组件

在这里插入图片描述

我们这里学习黑色背景的顶部导航栏组件。

导航菜单默认为垂直模式(就是不写)，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color(菜单的背景色)、text-color(菜单的文字颜色)和active-text-color(当前激活菜单的文字颜色).

代码实现

1.先复制视图即html标签

在这里插入图片描述

2.再复制js代码

在这里插入图片描述

<!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"><!--1. :default-active="activeIndex2" 表示默认被选中的菜单项2.导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式.mode="horizontal" 表示水平模式，不书写mode或者值是mode="vertical"都是垂直模式3.background-color="#545c64" 导航栏背景颜色4.text-color="#fff" 菜单文字颜色5.active-text-color="#ffd04b" 当前激活菜单颜色，就是当前被选中菜单的颜色6. @select="handleSelect" 表示每次点击顶部导航栏组件选项时执行的函数handleSelect--><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><!--在菜单中通过submenu组件可以生成二级菜单--><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><!--disabled表示不可用的--><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 表示背景颜色是白色的导航栏activeIndex: '1',/*activeIndex2 表示背景颜色是黑色的导航栏.activeIndex2: '1' 值即单引号中表示索引，从1开始：例如上述：1  处理中心2  我的工作台3  消息中心4  订单管理*/activeIndex2: '1'};},methods: {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><!--引入一张图片--><img src="img/export.png" class="header-img"/></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-header或者el-footer所以是左右显示--><!-- 侧边栏区域 --><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><!--默认展开索引是1即学工部--><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"  style="width: 100%;"><!--通过prop属性显示下面vue对象中的数据，prop的属性值必须是下面vue中的date name address--><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-columnlabel="操作"width="180"><el-button type="warning">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></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>

整体代码：

<!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><!--引入一张图片--><img src="img/export.png" class="header-img"/></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 style="height: 580px; border: 1px solid #eee"><!--没有el-header或者el-footer所以是上下垂直显示--><!-- 侧边栏区域 --><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><!--默认展开索引是1即学工部--><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><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"  style="width: 100%;"><!--通过prop属性显示下面vue对象中的数据，prop的属性值必须是下面vue中的date name address--><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-columnlabel="操作"width="180"><el-button type="warning">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></el-container></div>
</body>
<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>
</html>