环境
工具
<template> <el-container> <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); height: 100vh"> <el-menu :default-openeds="['1', '3']" style="height: 100%; overflow-x: hidden;" background-color="rgb(48,65,86)" text-color="#fff" :collapse-transition="false" :collapse="isCollapse" > <div style="height: 60px; line-height: 60px; text-align: center"> <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px"> <b style="color: #fff" v-show="Textshow">后台管理系统</b> </div> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-setting"></i> <span slot="title">导航三</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container style="height: 100%"> <el-header style="font-size: 18px; display:flex"> <div style="flex: 1;font-size: 18px"> <span :class="CollapseBtnClass" style="cursor: pointer" @click="Collapse"></span> </div> <el-dropdown style="width: 70px"> <span>王小虎</span> <i class="el-icon-arrow-down" style="margin-left: 5px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <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> <div style="margin: 10px 0"> <el-input style="width: 200px;" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input> <el-input style="width: 200px;" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input> <el-input style="width: 200px;" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input> <el-button class="ml-5" type="primary">搜索</el-button> </div> <div style="margin: 10px 0"> <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button> <el-button type="primary">批量删除<i class="el-icon-remove-outline"></i></el-button> <el-button type="primary">导入<i class="el-icon-bottom"></i></el-button> <el-button type="primary">导出<i class="el-icon-top"></i></el-button> </div> <el-table :data="tableData" border> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作" width="280"> <template slot-scope="scope" > <el-button type="success">编辑<i class="el-icon-edit"></i></el-button> <el-button type="danger">删除<i class="el-icon-remove-outline"></i></el-button> </template> </el-table-column> </el-table> <div style="padding: 10px 0"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div> </el-main> </el-container> </el-container> </template> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } </style> <script> export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(10).fill(item), CollapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, Textshow:true } }, methods:{ Collapse(){ this.isCollapse = !this.isCollapse if (this.isCollapse){ this.sideWidth = 64 this.CollapseBtnClass = 'el-icon-s-unfold' this.Textshow = false }else { this.sideWidth = 200 this.CollapseBtnClass = 'el-icon-s-fold' this.Textshow = true } } } }; </script>
*{ margin: 0; padding: 0; box-sizing: border-box; } .ml-5{ margin-left: 5px; } .mr-5{ margin-right: 5px; } .pd-10{ padding: 10px 0; }
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import './assets/global.css';