用Vue写教务系统学生管理

一.首先创建新的Demo

二.在APP里面绑定DemoStudent

<template><img alt="Vue logo" src="./assets/logo.png"><!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --><demo-student></demo-student>
</template><script>
// import HelloWorld from './components/HelloWorld.vue'
import DemoStudent from './components/DemoStudent.vue';export default {name: 'App',components: {// HelloWorldDemoStudent}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

三.源码附上

<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><script>
export default{data(){return{desc:'七年级1班学生统计',stus:[{name:'小王',age:14,sex:'男',date:'2020年8月15日'},{name:'小张',age:15,sex:'男',date:'2020年8月15日'},{name:'小秋',age:15,sex:'女',date:'2020年8月15日'}] }},methods:{selectFunc(index){let strs=['七','八','九']let rank=strs[Math.floor((index-1)/3)]this.desc=`${rank}年级${((index-1)%3)+1}班学生统计`}}
}
</script>

四.效果图（新增记录还未实现）