用Vue写教务系统学生管理

一.首先创建新的Demo

二.在APP里面绑定DemoStudent

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  
  <demo-student>demo-student>
template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import DemoStudent from './components/DemoStudent.vue';

export default {
  name: 'App',
  components: {
    // HelloWorld
    DemoStudent
  }
}
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

三.源码附上

<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>

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

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