想做出上面的效果，代码如下：
一、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;
}
1655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
