学生列表案例
发布日期：2021-05-14 14:47:07
浏览次数：14
分类：原创文章
本文共 4683 字，大约阅读时间需要 15 分钟。
22-学生列表案例-案例的效果和分析
23-学生列表案例-头部区域的实现
-
实现思路
- 头部效果实现。
- 侧边栏和主区域效果实现。
-
代码实现
<!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>
24-学生列表案例-侧边栏区域的实现
<!-- 侧边栏区域 --><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>25-学生列表案例-主区域的实现
主区域和侧边栏区域放在一起
<!-- 主区域 --><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>发表评论
最新留言
初次前来，多多关照！
[***.217.46.12]2025年04月25日 13时27分04秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
LinkedList 实现类
2021-05-14
Vector 实现类
2021-05-14
HashMap类、HashSet
2021-05-14
HashTable类
2021-05-14
TreeSet、TreeMap
2021-05-14
ObjectInputStream、ObjectOutputStream
2021-05-14
JVM内存模型
2021-05-14
反射机制
2021-05-14
反射Field、Method、Constructor
2021-05-14
可变长度参数
2021-05-14
堆空间常用参数总结
2021-05-14
逃逸分析-堆分配对象
2021-05-14
常量池、运行时常量池
2021-05-14
3、条件查询
2021-05-14
5、分组函数 / 聚合函数
2021-05-14
8、子查询
2021-05-14
cordova打包apk更改图标
2021-05-14
开启与配置SMTP服务器
2021-05-14
APP卡片式设计
2021-05-14
GitHub上传时，项目在已有文档时直接push出现错误解决方案
2021-05-14
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 461274704 位访客