淄川响应式网站建设,东莞模板建站平台,网页制作模板素材库,北京 设计网站文章目录 一.首先创建新的Demo二.在APP里面绑定DemoStudent三.源码附上四.效果图#xff08;新增记录还未实现#xff09; 一.首先创建新的Demo 二.在APP里面绑定DemoStudent
templateimg altVue logo src./assets/logo.png!--… 文章目录 一.首先创建新的Demo二.在APP里面绑定DemoStudent三.源码附上四.效果图新增记录还未实现 一.首先创建新的Demo 二.在APP里面绑定DemoStudent
templateimg altVue logo src./assets/logo.png!-- HelloWorld msgWelcome to Your Vue.js App/ --demo-student/demo-student
/templatescript
// import HelloWorld from ./components/HelloWorld.vue
import DemoStudent from ./components/DemoStudent.vue;export default {name: App,components: {// HelloWorldDemoStudent}
}
/scriptstyle
#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
三.源码附上
templateel-containerel-header height80px stylepadding: 0;div classheader教务系统学生管理/div/el-headerel-containerel-aside width200pxel-menu classaside selectselectFunc default-active1 :unique-openedtrueel-sub-menu index1template #titlespan七年级/span/templateel-menu-item index11班/el-menu-itemel-menu-item index22班/el-menu-itemel-menu-item index33班/el-menu-item/el-sub-menuel-sub-menu index2template #titlespan八年级/span/templateel-menu-item index41班/el-menu-itemel-menu-item index52班/el-menu-itemel-menu-item index63班/el-menu-item/el-sub-menuel-sub-menu index3template #titlespan九年级/span/templateel-menu-item index71班/el-menu-itemel-menu-item index82班/el-menu-itemel-menu-item index93班/el-menu-item/el-sub-menu/el-menu/el-asideel-containerel-header height80px stylepadding: 0;margin: 0;el-container classsubHeaderdiv classdesc{{ desc }}/divel-button stylewidth: 100px;height: 30px;margin: 20px;新增记录/el-button/el-container/el-headerel-main stylemargin: 0;padding: 0;div classcontentel-table :datastusel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropagelabel年龄/el-table-columnel-table-columnpropsexlabel性别/el-table-columnel-table-columnpropdatelabel录入日期/el-table-column/el-table/div/el-mainel-footer height30px classfooterVue框架搭建,ElementPlus提供组件支持/el-footer/el-container/el-container/el-container/templatestyle 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;}/stylescript
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 rankstrs[Math.floor((index-1)/3)]this.desc${rank}年级${((index-1)%3)1}班学生统计}}
}
/script四.效果图新增记录还未实现
