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

---

🚀前言

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

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

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

<script setup>javascript">
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-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="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> 部分

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

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