?想做出上面的效果，代码如下：
一、index.html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <!-- <meta> 标签通常位于 <head> 区域内。
? ? <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 -->
? ? <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>学生信息管理系统</title>
? ? <!-- 使用CDN引入Vue模块-->
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
? ? <!-- 引入外部的样式文件，来自于css -->
? ? <link rel="stylesheet" href="./css/index.css">
? ? <!-- 引入Element UI样式 -->
? ? <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
? ? <!-- 引入Element组件库 -->
? ? <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
? ? <!-- 创建了一个名字为app的容器 -->
? ? <div id="app">
? ? ? ? <el-container>
? ? ? ? ? ? <!-- height字体高度 -->
? ? ? ? ? ? <el-header style="height: 80px;">学生信息管理系统</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">班级管理</span>
? ? ? ? ? ? ? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? ? ? ? ? ? ? <el-menu-item index="2">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-user"></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <span slot="title">学生信息</span>
? ? ? ? ? ? ? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? ? ? ? ? ? ? <el-menu-item index="3">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-s-custom"></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <span slot="title">讲师信息</span>
? ? ? ? ? ? ? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? ? ? ? ? ? ? <el-menu-item index="4">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="el-icon-document"></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <span slot="title">课程管理</span>
? ? ? ? ? ? ? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? ? ? ? ? </el-menu>
? ? ? ? ? ? ? ? </el-aside>
? ? ? ? ? ? ? ? <!-- 主框体 -->
? ? ? ? ? ? ? ? <el-container>
? ? ? ? ? ? ? ? ? ? <el-main>
? ? ? ? ? ? ? ? ? ? ? ? <!-- 面包屑导航 -->
? ? ? ? ? ? ? ? ? ? ? ? <el-breadcrumb separator-class="el-icon-arrow-right">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-breadcrumb-item>学生管理</el-breadcrumb-item>
? ? ? ? ? ? ? ? ? ? ? ? </el-breadcrumb>
? ? ? ? ? ? ? ? ? ? ? ? <!-- 表单 -->
? ? ? ? ? ? ? ? ? ? ? ? <el-form inline="ture" style="margin-top:20px ;">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- inline为真意思是表单横着展示,margin-top是指离上边面包屑的距离-->
? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 布局，总长为24 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-row :gutter="20">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-col :span="12">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-form-item label="请输入查询条件">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input placeholder="请输入查询条件" style="width:360px;"></el-input>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-col>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 让这组按钮居右显示，并且和右边的按钮组的间隙为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>
? ? ? ? ? ? ? ? ? ? ? ? <!-- 表格 -->
? ? ? ? ? ? ? ? ? ? ? ? <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>
? ? ? ? ? ? ? ? ? ? ? ? <!-- 分页 -->
? ? ? ? ? ? ? ? ? ? ? ? <!-- 布局 -->
? ? ? ? ? ? ? ? ? ? ? ? <el-row style="margin-top:10px ;">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-col :span="8" style="text-align:left">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-button type="primary" icon="el-icon-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;">学生信息管理系统 版权所有 zhaoyahui 20220811</el-footer>
? ? ? ? ? ? ? ? </el-container>
? ? ? ? ? ? </el-container>
? ? ? ? </el-container>
? ? </div>
</body>
</html>
<!-- 如果vue的代码都放在html页面，那么他就会很长很乱，所以可以将其一个个的独立出来，放在js文件中 -->
<!-- 下面的代码放在了index.js中 -->
<!-- <script>
? ? //实例化一个对象
? ? const app= new Vue({
? ? ? ? el:'#app',// 应用在了id为app的容器上
? ? ? ? data:{
? ? ? ? ? ? msg:'Hello,Vue',
? ? ? ? }
? ? })
</script> -->
?
<!-- 由于上面的代码放在了index.js中，所以要将其引入过来 -->
<script src="./js/index.js"></script>
二、index.js
const app= new Vue({
? ? el:'#app',// ?应用在了id为app的容器上
? ? data:{
? ? ? ? msg:'Hello,Vue',
? ? ? ? students:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? sno:95001,name:"刘建辉",gender:"男",birthday:"1991-02-11",mobile:"18271953674",email:"2298879876@qq.com",address:"上海市"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? sno:95002,name:"张三",gender:"男",birthday:"1992-02-11",mobile:"18271953674",email:"2298879876@qq.com",address:"上海市"
? ? ? ? ? ? },
? ? ? ? ],
? ? ? ? totalnum:100,
? ? ? ? currentPage4:2,
? ? ? ? pagesize:10,
? ? }
})
三、index.css
html,body,#app,.el-container{
? ? margin: 0px;/*边距为0*/
? ? padding: 0px;/*边距为0*/
? ? height: 100%;
}
?
.el-header {
? ? background-color: #B3C0D1;
? ? color: #333;
? ? text-align: left;/*标题字体位置*/
? ? line-height: 80px;/*行高*/
? ? font-size: 32px;
? }
? .el-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;
? }