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

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

文章目录

🚀前言
🚀一、案例：教务系统学生列表页面
- 🔎1. `<script setup>` 部分
- 🔎2.`<template>` 部分
- - 🦋2.1 布局
  - 🦋2.2 表格（`el-table`）
  - 🦋2.3 按钮
- 🔎3.`<style scoped>` 部分
- 🔎4.总结

🚀前言

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

本篇文章将通过一个具体的案例，带你深入了解如何构建一个功能齐全的教务系统学生列表页面。我们将结合 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 进行限定。

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