To achieve the above effect, the code is as follows:
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The <meta> tag is usually located within the <head> area.
The <meta> tag provides metadata for an HTML document. The metadata will not be displayed on the client, but will be parsed by the browser. -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Student Information Management System</title>
<!-- Use CDN to introduce Vue modules -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Introduce external style files from css -->
<link rel="stylesheet" href="./css/index.css">
<!--Introducing Element UI style-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!--Introducing the Element component library-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!-- Created a container named app -->
<div id="app">
<el-container>
<!-- height font height -->
<el-header style="height: 80px;">Student Information Management System</el-header>
<el-container>
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">Class Management</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-user"></i>
<span slot="title">Student Information</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-s-custom"></i>
<span slot="title">Lecturer information</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-document"></i>
<span slot="title">Course Management</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- Main frame -->
<el-container>
<el-main>
<!-- Breadcrumbs -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>Student Management</el-breadcrumb-item>
</el-breadcrumb>
<!-- Form-->
<el-form inline="ture" style="margin-top:20px ;">
<!-- if inline is true, it means the form is displayed horizontally, and margin-top refers to the distance from the top breadcrumbs -->
<!-- Layout, total length is 24 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="Please enter query conditions">
<el-input placeholder="Please enter query conditions" style="width:360px;"></el-input>
</el-form-item>
</el-col>
<!-- Let this group of buttons be displayed on the right, and the gap between it and the button group on the right is 10px -->
<el-col :span="8" style="text-align:right;padding-right: 10px;">
<el-button-group>
<el-button type="primary" icon="el-icon-search">查询</el-button>
<el-button type="primary" icon="el-icon-tickets">全部</el-button>
<el-button type="primary" icon="el-icon-plus">添加</el-button>
</el-button-group>
</el-col>
<el-col :span="2">
<el-upload>
<el-button type="primary">导入Excle</el-button>
</el-upload>
</el-col>
<el-col :span="2">
<el-upload>
<el-button type="primary">导出Excle</el-button>
</el-upload>
</el-col>
</el-row>
</el-form>
<!-- Table -->
<el-table :data="students" border style="width: 100%" size="mini">
<el-table-column type="selection">
</el-table-column>
<el-table-column type="index" label="序号" width="60">
</el-table-column>
<el-table-column prop="sno" label="学号" width="80">
</el-table-column>
<el-table-column prop="name" label="姓名" width="80">
</el-table-column>
<el-table-column prop="gender" label="性别" width="60">
</el-table-column>
<el-table-column prop="birthday" label="生日" width="100">
</el-table-column>
<el-table-column prop="mobile" label="电话" width="120">
</el-table-column>
<el-table-column prop="email" label="邮箱" align="center" width="220">
</el-table-column>
<el-table-column prop="address" label="地址" align="center" width="">
</el-table-column>
<el-table-column label="操作" width="180">
<el-button type="success" icon="el-icon-check" size="mini" circle></el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
</el-table-column>
</el-table>
<!--Paging-->
<!-- Layout -->
<el-row style="margin-top:10px ;">
<el-col :span="8" style="text-align:left">
<el-button type="primary" icon="el-icon-delete">Batch delete</el-button>
</el-col>
<el-col :span="16" style="text-align:right">
<el-pagination
:current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="totalnum">
</el-pagination>
</el-col>
</el-row>
</el-main>
<el-footer style="height: 30px;">Student Information Management System Copyright zhaoyahui 20220811</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
</html>
<!-- If the vue code is placed on the html page, it will be very long and messy, so you can separate it one by one and put it in the js file -->
<!-- The following code is placed in index.js -->
<!-- <script>
//instantiate an object
const app= new Vue({
el:'#app',//Applied to the container with id app
data:{
msg:'Hello,Vue',
}
})
</script> -->
<!-- Since the above code is placed in index.js, it needs to be introduced -->
<script src="./js/index.js"></script>
2. index.js
const app= new Vue({ el:'#app',// Applied to the container with id app data:{ msg:'Hello,Vue', students:[ { sno:95001,name:"Liu Jianhui", gender:"Male",birthday:"1991-02-11",mobile:"18271953674",email:"[email protected]",address:"Shanghai" }, { sno : 95002,name:"Zhang San ",gender:"Male",birthday:"1992-02-11",mobile:"18271953674",email:"[email protected]",address:"Shanghai" } ,
],
totalnum:100,
currentPage4:2,
pagesize:10,
}
})
3. index.css
html,body,#app,.el-container{
margin: 0px;/*margin is 0*/
padding: 0px;/*margin is 0*/
height: 100%;
}
.el-header {
background-color: #B3C0D1;
color: #333;
text-align: left;/*Title font position*/
line-height: 80px;/*line height*/
font-size: 32px;
}
.the-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 30px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
/*text-align: center;*/
/*line-height: 160px;*/
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}