Vue实验7：UI组件

一、实验目的：
掌握element plus主要API的使用方法
二、实验内容：
实现一个教务系统学生列表页面

<template>
<el-container>
<el-header>
    教务系统学生管理
</el-header>
<el-container>
<el-aside>
    <el-menu class="aside-box" default-active="1" :unique-opened="true">
        <el-submenu index="1">
            <span>七年级</span>
            <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-submenu>
        <el-submenu index="2">
            <span>八年级</span>
            <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-submenu>
        <el-submenu index="3">
            <span>九年级</span>
            <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-submenu>
    </el-menu>
</el-aside>
<el-container>
    <el-header class="header-box">
        {{desc}}
        <el-button>新增记录</el-button>
    </el-header>
    <el-main>
        <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="data" label="录入日期"></el-table-column>
            </el-table>
        </div>
    </el-main>
</el-container>
</el-container>
<el-footer>
    vue框架搭建，ElementPlus提供组件支持
</el-footer>
</el-container>
</template>
<script>
    export default{
        data(){
            return {
                desc:"七年级1班学生统计",
                stus:[
                    {
                        name:"崔月馨",
                        age:14,
                        sex:"女",
                        data:"2024.6.1"
                    },
                    {
                        name:"星星",
                        age:18,
                        sex:"女",
                        data:"2024.6.1"
                    },
                    {
                        name:"月亮",
                        age:22,
                        sex:"女",
                        data:"2024.6.1"
                    },
                ]
            }
        }
    }
</script>
<style scoped>
header{
    padding:0px;
    margin:0px;
    background-color: #303030;
    color:white;
    height:80px;
    font-size: 30px;
    line-height:80px;
}
aside{
    width:200px;
    background-color: #b7b7b7;
    color:black;
}
.aside-box{
    height:600px;
}
footer{
    background-color: #303030;
    height: 50px;
}
.header-box{
    font-size: 15px;
}
</style>

实验结果：