- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》051-案例：教务系统学生列表页面

愚公搬代码发表于 2025/02/28 23:37:07 2025/02/28

39 0 0

【摘要】标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代教育管理中，教务系统作为学校信息化建设的重要组成部分，承担着学生信息管理、课程安排、成绩统计等多项职能。而学生列表页面则是教务系统中最基本且最关键的功能之一，能够高效地展示学生的基本信息及其相关数据，帮助教务人员进行日常管理和决策。

本篇文章将通过一个具体的案例，带你深入了解如何构建一个功能齐全的教务系统学生列表页面。我们将结合 Element Plus 组件库，详细介绍页面的设计思路、功能模块及实现过程。

🚀一、案例：教务系统学生列表页面

<script setup>
import { ref } from 'vue'
const desc = ref("七年级1班学生统计")
const stus = ref([
    {
        name:"小王",
        age:14,
        sex:"男",
        date:"2020年8月15日"
    },{
        name:"小张",
        age:15,
        sex:"男",
        date:"2020年5月15日"
    },{
        name:"小秋",
        age:15,
        sex:"女",
        date:"2020年8月15日"
    }
])
function selectFunc(index) {
    let strs = ["七","八","九"]
    let rank = strs[Math.floor((index-1) / 3)]
    desc.value = `${rank}年级${((index-1) % 3) + 1}班学生统计`
} 
</script>

<template>
  <el-container>
    <el-header height="80px" style="padding:0">
      <div class="header">教务系统学生管理</div>
    </el-header>
    <el-container>
      <el-aside width="200px">
          <el-menu class="aside" @select="selectFunc" default-active="1" :unique-opened="true">
            <el-sub-menu index="1">
                <template #title>
                    <span>七年级</span>
                </template>
                <el-menu-item index="1">1班</el-menu-item>
                <el-menu-item index="2">2班</el-menu-item>
                <el-menu-item index="3">3班</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <span>八年级</span>
                </template>
                <el-menu-item index="4">1班</el-menu-item>
                <el-menu-item index="5">2班</el-menu-item>
                <el-menu-item index="6">3班</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
                <template #title>
                    <span>九年级</span>
                </template>
                <el-menu-item index="7">1班</el-menu-item>
                <el-menu-item index="8">2班</el-menu-item>
                <el-menu-item index="9">3班</el-menu-item>
            </el-sub-menu>
          </el-menu>
      </el-aside>
      <el-container>
        <el-header height="80px" style="padding:0;margin:0">
            <el-container class="subHeader">
                <div class="desc">{{desc}}</div>
                <el-button style="width:100px;height:30px;margin:20px">新增记录</el-button>
            </el-container>
        </el-header>
        <el-main style="margin:0;padding:0">
            <div class="content">
                <el-table :data="stus">
                    <el-table-column
                    prop="name"
                    label="姓名">
                    </el-table-column>
                    <el-table-column
                    prop="age"
                    label="年龄">
                    </el-table-column>
                    <el-table-column
                    prop="sex"
                    label="性别">
                    </el-table-column>
                    <el-table-column
                    prop="date"
                    label="录入日期">
                    </el-table-column>
                </el-table>
            </div>
        </el-main>
        <el-footer height="30px" class="footer">Vue框架搭建，ElementPlus提供组件支持</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
.header {
    font-size: 30px;
    line-height: 80px;
    background-color: #f1f1f1;
}
.aside {
    background-color: wheat;
    height: 600px;
}
.subHeader {
    background-color:cornflowerblue;
}
.desc {
    font-size: 25px;
    line-height: 80px;
    color: white;
    width: 800px;
}
.content {
    height: 410px;
}
.footer {
    background-color:dimgrey;
    color: white;
    font-size: 17px;
    line-height: 30px;
}
</style>

🔎1. `<script setup>` 部分

import { ref } from 'vue'

const desc = ref("七年级1班学生统计")

const stus = ref([
  { name: "小王", age: 14, sex: "男", date: "2020年8月15日" },
  { name: "小张", age: 15, sex: "男", date: "2020年5月15日" },
  { name: "小秋", age: 15, sex: "女", date: "2020年8月15日" }
])

function selectFunc(index) {
  let strs = ["七", "八", "九"]
  let rank = strs[Math.floor((index - 1) / 3)]
  desc.value = `${rank}年级${((index - 1) % 3) + 1}班学生统计`
}

ref 引入：通过 import { ref } from 'vue' 引入了 ref，用于定义响应式数据。
desc：这是一个响应式变量，用于存储当前显示的描述信息。初始值为 "七年级1班学生统计"，它会显示在页面的头部，指示当前查看的是哪个班级的学生统计信息。
stus：这是另一个响应式变量，存储了一个学生信息的数组。每个学生对象包含姓名、年龄、性别和录入日期。该数组会绑定到表格中显示学生数据。
selectFunc：这是一个函数，用于更新 desc 的值。当菜单中的班级项被选中时，该函数会根据所选班级的索引，动态更新描述信息。例如，选择 七年级1班 时，desc 的值会变成 "七年级1班学生统计"。

🔎2.`<template>` 部分

🦋2.1 布局

<el-container>
  <el-header height="80px" style="padding:0">
    <div class="header">教务系统学生管理</div>
  </el-header>
  <el-container>
    <el-aside width="200px">
      <el-menu class="aside" @select="selectFunc" default-active="1" :unique-opened="true">
        ...
      </el-menu>
    </el-aside>
    <el-container>
      <el-header height="80px" style="padding:0;margin:0">
        <el-container class="subHeader">
          <div class="desc">{{desc}}</div>
          <el-button style="width:100px;height:30px;margin:20px">新增记录</el-button>
        </el-container>
      </el-header>
      <el-main style="margin:0;padding:0">
        <div class="content">
          <el-table :data="stus">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="录入日期"></el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer height="30px" class="footer">
        Vue框架搭建，ElementPlus提供组件支持
      </el-footer>
    </el-container>
  </el-container>
</el-container>

<el-container>：这是一个容器组件，用于组织页面的整体布局。容器可以嵌套使用，创建复杂的页面布局结构。
<el-header>：表示页面的头部区域，包含网站标题。头部区域的样式设定了高度 80px，并且有一个 .header 类，设置了字体大小和背景颜色。
<el-aside>：侧边栏组件，宽度为 200px，包含一个菜单 el-menu。菜单项会展示年级和班级，点击不同的班级会触发 selectFunc 函数，从而更新页面描述。
<el-menu>：Element Plus 的菜单组件，支持多级菜单。这里分为 七年级、八年级、九年级 三个子菜单，每个子菜单包含三个班级。通过 @select="selectFunc" 绑定了 selectFunc 函数，点击菜单项时会调用该函数更新 desc。
<el-main>：页面的主内容区域，包含一个表格 el-table 用于展示学生信息。表格中展示了每个学生的姓名、年龄、性别和录入日期。
<el-footer>：页面底部区域，显示了一些版权信息或者框架信息。

🦋2.2 表格（`el-table`）

<el-table :data="stus">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="sex" label="性别"></el-table-column>
  <el-table-column prop="date" label="录入日期"></el-table-column>
</el-table>

el-table：这是一个表格组件，data 属性绑定到 stus 数组。表格会根据 stus 数组中的数据动态渲染行。
el-table-column：每列代表学生的一个属性（如姓名、年龄、性别、录入日期），通过 prop 属性绑定相应的字段，label 属性设置列头的文本。

🦋2.3 按钮

<el-button style="width:100px;height:30px;margin:20px">新增记录</el-button>

el-button：这是一个按钮组件，点击该按钮可能会用来新增学生记录。按钮的样式通过内联样式进行了设置。

🔎3.`<style scoped>` 部分

.header {
  font-size: 30px;
  line-height: 80px;
  background-color: #f1f1f1;
}
.aside {
  background-color: wheat;
  height: 600px;
}
.subHeader {
  background-color: cornflowerblue;
}
.desc {
  font-size: 25px;
  line-height: 80px;
  color: white;
  width: 800px;
}
.content {
  height: 410px;
}
.footer {
  background-color: dimgrey;
  color: white;
  font-size: 17px;
  line-height: 30px;
}

.header：定义了头部区域的样式，设置了字体大小、行高以及背景色。
.aside：设置了侧边栏的背景色和高度。
.subHeader：设置了次头部的背景色。
.desc：设置了描述信息区域的字体大小、行高、文字颜色和宽度。
.content：定义了内容区域的高度。
.footer：设置了底部区域的背景色、字体颜色、字体大小和行高。

🔎4.总结

这个页面主要包含了以下几个功能：

侧边栏菜单：用户可以点击不同的年级和班级，动态更新页面上方的描述信息（如 "七年级1班学生统计"）。
学生表格：通过表格组件展示了学生的信息（姓名、年龄、性别、录入日期）。
新增记录按钮：在描述信息旁边有一个按钮，可能用于跳转到一个新增学生记录的页面（这部分在代码中没有实现）。
布局与样式：页面布局使用了 Element Plus 的 el-container、el-header、el-aside、el-main、el-footer 等组件，样式通过 scoped CSS 进行限定。

通过这种方式，页面实现了一个简单的学生管理系统的框架，具有良好的可维护性和交互性。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

作者其他文章

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

开发者空间

了解空间

工作台

开发工具

实战案例

空间活动

空间论坛

开发平台

软件开发生产线 CodeArts

AI平台ModelArts

数据治理中心 DataArts Studio

数字内容生产线 MetaStudio

精选服务

云数据库 GaussDB

云数据库 RDS for MySQL

MapReduce服务 MRS

数据仓库服务 DWS

分布式缓存服务Redis版

分布式消息服务 DMS

华为云实时音视频 SparkRTC

媒体处理 MPC

主机迁移服务 SMS

对象存储迁移服务 OMS

云消息服务 KooMessage

云手机服务 KooPhone

企业搜索服务 KooSearch

云地图服务 KooMap

更多开放能力

开发工具

API生态

CodeArts API

API Explorer

Terraform Explorer

KooCLI

API 中心

SDK 中心

开发服务

Codelabs

DevStar

低代码平台Astro

CodeArts IDE

Huawei Cloud Toolkit

Classroom

开发资源

开源镜像站

开源资源

开发语言

开发实践

入门精选

分发资源

企业应用中心

企业通用专区

教育专区

华为应用专区

政务云专区

硬件云服务商城

医疗健康专区

跳蚤市场

华为云开发者日

直播专区

开发者精品活动

DTSE Tech Talk

加入HCDE

加入HCDG

加入HCSD

加入HCWD

鲁班会

沃土云创计划·企业

沃土云创计划·高校

沃土云创计划·个人

沃土云创计划·开源共创

博客

论坛

专题

开发者榜单

学习路径

在线课程

动手实验

考试认证

培训服务

🔎1. `<script setup>` 部分

🔎2.`<template>` 部分

🦋2.2 表格（`el-table`）

🔎3.`<style scoped>` 部分