学生列表案例

最新推荐文章于 2022-03-22 17:47:34 发布
最新推荐文章于 2022-03-22 17:47:34 发布
阅读量1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/103519388
版权

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>
*Major*
关注
vue学生列表案例
fadsdsad的博客
03-16 1837
vue学生列表案例
Vue作业-学生列表
weixin_64665051的博客
03-10 2617
作业内容 代码实现 <head> <title>学生列表</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <button @click="add">添加学生</button> <button @click="del">删除
VUE:学生列表案例——内部指令v-for与v-on简单应用
fuzhijieabc的博客
12-01 4593
#本案例需要熟悉v-for与v-on这两个vue内部指令，下面通过两个简单的案例，带领大家迅速熟悉一下这两个常用的内部指令 v-for指令：主要用于列表的渲染与循环数组 简单案例： 关键代码部分： <div id="app"> <div v-for="(item,index) in list" data-id=“index"> 索引是：{{index}}，元素内容是：{{item}} </div> </div> <script>
列表实现例子
weixin_34081595的博客
10-11 86
1 #ifndef LIST_H_ 2 #define LIST_H_ 3 4 #include <stdbool.h> 5 #define TSIZE 45 6 7 typedef struct film 8 { 9 char title[TSIZE]; 10 int rating; 11 } Item; 12 13...
列表案例
weixin_30335575的博客
05-27 293
1 <h4>一个无序列表</h4> 2 <ul> 3 <li>咖啡</li> 4 <li>牛奶</li> 5 <li>茶</li> 6 </ul> 1 <!DOCTYPE html> 2 &...
vue实现学生录入系统之添加删除功能
10-18
通过这些校验后，使用JavaScript的unshift()方法将新对象添加到persons数组的开头，这样新的学生信息就会出现在列表的最上方。 为了实现删除功能，我们同样使用按钮并通过事件绑定来调用删除学生记录的方法...
vue案例-学生列表.rar
最新发布
03-13
利用Vue制作一个简单的学生列表或面、来实现学生信息的动态添加和删除，涉及指令v-on，v-show，v-model等等。
用VS Code写一个简单的学生列表（html vue）
Ecstatic123的博客
03-20 2966
用vs code写一个简单的学生列表（html vue） 1.定义表格结构 <div id="app"> <button @click="add">添加学生</button> <button @click="del">删除学生</button> <table border="1" width="50%" style="border-collapse: collapse;">
thinkphp5 第14课：项目案例-学生列表模板设计
李书明(石家庄)的专栏
09-18 626
学生列表页的模板效果如下： 上面的页面中，主要有： 导航 表格 按钮 模态窗口 ajax提交 参考代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
学生-课程-选课(学习数据库经典的例子，3个表SQL Server数据库)
05-11
学生-课程-选课(学习数据库经典的例子SQL Server数据库)，不用再重复性的劳动了，建好了表，有少量的数据，是数据库学习的优秀例子
vue.js学习经典实例（本人总结）
12-08
基于vue.js开发，移动前端的例子，聊天窗口，消息列表，tab切换。
JSP项目实例-学生信息管理系统
06-03
JSP项目实例 学生信息管理系统 JDBC JSP 学生信息管理 Mysql
Vue学习笔记九：列表案例
dengtangda9444的博客
04-30 322
目录 前言 Bootstrap插件下载 Bootstrap表格和面板 增加数据，v-model和v-on 删除数据，事件修饰符和找索引的两种方法 查询数据，foreach和filter 全部的HTML 前言 V...
简单的学生列表
qq_64664592的博客
03-22 158
sql查询，学生表例子(自用)
weixin_30492601的博客
01-19 3120
一、 设有一数据库，包括四个表：学生表（Student）、课程表（Course）、成绩表（Score）以及教师信息表（Teacher）。四个表的结构分别如表1-1的表（一）~表（四）所示，数据如表1-2的表（一）~表（四）所示。用SQL语句创建四个表并完成相关题目。 表1-1数据库的表结构 表（一）Student (学生use)...
班级学生列表
qq_42754261的博客
12-30 841
// 1 创建一个班级集合 List list = new ArrayList(); list.add("张三丰"); list.add("杨过"); list.add("郭靖"); // 2 放到HashMap()集合 Map&lt;String ,List&gt; grade = new &lt;String ,List&gt;HashMap(); grade.put("...
List练习 三个案例
latesummer_的博客
05-04 2093
考察了 可变参数  泛型  增强for循环  集合的嵌套遍历一、学生案例package com.shulian_01; import java.util.ArrayList; import java.util.List; public class ArrayListTest { public static void main(String[] args) { List&lt;Stude...
学生列表页显示
yc_wyj的博客
06-11 593
首先写一个方法const app = getApp() var page = 1; var isfinish = false; function loadmore(that){ if(isfinish) return; wx.showLoading({ title: '正在加载中', }) wx.request({ url: 'http://www.zhansiy...
C语言实现的学生信息管理系统
"C语言程序课程设计-学生管理系统，包含源代码，用于管理学生信息，如...此项目不仅涵盖了基本的C语言语法，还涉及了数据结构（链表）、文件操作、函数编程和用户交互等高级主题，是学习C语言和程序设计的实用案例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值