ElementUI-学生管理系统后台实例

难度基本没有，调用el组件就行，就像搭积木一样。

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo2</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;color: #333;text-align: center;line-height: 60px;}.el-footer {background-color: #545c64;color: #333;text-align: center;line-height: 60px;/*position:fixed;*//*width: 78.5%;*//*bottom:0px;*/}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #ffffff;color: #333;text-align: center;}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="app"><el-container><el-header><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"style="float: right;"><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="#">首页</a></el-menu-item></el-menu></el-header><el-container><el-col :span="5"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"default-openeds=['1']>
<!--                                default-openeds=["1"]--><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i><span style="font-size: 20px">学工部</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1"style="font-size: 15px"><i class="el-icon-s-help"></i >在校学生管理</el-menu-item><el-menu-item index="1-2"style="font-size: 15px"><i class="el-icon-help"></i>学生升级/留级</el-menu-item><el-menu-item index="1-3"style="font-size: 15px"><i class="el-icon-water-cup"></i>学生就业情况</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title"style="font-size: 20px">咨询部</span></el-menu-item><el-menu-item index="3"><i class="el-icon-setting"></i><span slot="title"style="font-size: 20px">教研部</span></el-menu-item></el-menu></el-col><el-container><el-main><div><h3 style="float: left;color: red;">学生列表</h3><el-button type="primary" style="float: right">添加学生</el-button></div><template><el-table:data="tableData"style="width: 100%"><el-table-columnlabel="日期"width="300"><template slot-scope="scope" ><i class="el-icon-time"></i><span style="margin-left: 10px;font-size: 15px">{{ scope.row.date }}</span></template></el-table-column><el-table-columnlabel="姓名"width="300"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p style="font-size: 15px">姓名: {{ scope.row.name }}</p><p style="font-size: 15px">住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium" style="font-size: 15px">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-columnlabel="地址"width="600"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium"style="font-size: 15px">{{ scope.row.address }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="warning"size="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttontype="danger"size="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></template></el-main><el-footer><span style="float: left;color: #000000">© 2021 Copyright</span><span style="float: right;color: #000000">Powered by ENSIO | Theme by ENISO</span></el-footer></el-container></el-container></el-container></div>
</body>
<script>new Vue({el:"#app",data:{activeIndex: '1',activeIndex2: '1',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 弄'}]},methods:{handleSelect(key, keyPath) {console.log(key, keyPath);},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);}}});
</script>
</html>

ElementUI-学生管理系统后台实例相关推荐

python删除字典中性别为男_python初学者，用python3实现基本的学生管理系统代码实例...
本篇文章主要分享python学生管理系统的使用,文章非常详细地介绍了通过示例代码实现的学生管理系统,该系统对每个人的研究或工作都有一定的参考学习价值,希望你能在其中有所收获. 这个是用python实现 ...
python pop check mail_python初学者，用python3实现基本的学生管理系统代码实例
本篇文章主要分享python学生管理系统的使用,文章非常详细地介绍了通过示例代码实现的学生管理系统,该系统对每个人的研究或工作都有一定的参考学习价值,希望你能在其中有所收获. 这个是用python实现 ...
python做一个系统代码_python初学者，用python3实现基本的学生管理系统代码实例...
这篇文章分享了管理系统,python学生管理系统的使用,这篇文章非常详细地介绍了通过示例代码实现的学生管理系统,该系统对每个人的研究或工作都有一定的参考学习价值. 这个是用python实现的基本的增删 ...
Web教程---学生管理系统-教师端
学生管理系统->教师端一.创建TeacherLogin.jsp 实现的内容: 效果图: 代码: 二.创建Teacher.jsp 三.创建TeacherLoginServlet.java 一.创 ...
vue+elementui学生宿舍管理系统(报修,来访登记,水电费)java ssm项目介绍
宿舍,是大学生在高校校园里一个重要的学习.生活.交往的空间环境,大学生大约有2/3的时间是在宿舍环境里渡过的.作为计算机应用的一部分,使用计算机对宿舍信息进行管理,具有着手工管理所无法比拟的优点.例如 ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
java+mysql学生学籍后台管理系统源码
介绍: java+mysql学生学籍后台管理系统源码网盘下载地址: http://kekewl.cc/ikZ3un3U9en0 图片:
python学生管理系统用类写_python面向对象——学校学生教职工管理系统类的实例...
这里做一个学校的人事管理系统中的类的实例化,其中含有的类:Person.Student.Stuff三个类.下面来具体分析类所要实现的功能. 首先可以定义使用Person类,找出学生和教职工之间的共同属 ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建
框架布局本章只介绍基础布局,和一些主要的js,页面上基本上都是些交互事件,项目代码上都有注释,不懂的地方debug跑一变就知道了,只是这些事件基本上没有独立存在的,相互之间都有关联框架风格新建页 ...

ElementUI-学生管理系统后台实例

ElementUI-学生管理系统后台实例

代码

ElementUI-学生管理系统后台实例相关推荐

最新文章

热门文章