Elementui+Vue后台主页⾯布局Elementui+Vue 后台主页⾯布局
涉及到公司业务就不放出来了，主页⾯⼤概是这样，防⽌每次都需要布局后台就直接上传csdn 下次直接拿来⽤就好。⾸页elementui+vue代码如下
<!DOCTYPE html>
<html>
<head>
<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>
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!--引⼊样式-->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<!--引⼊组件库-->
<script src="unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-container
:>
<el-aside width="auto" >
<el-menu class="el-menu-vertical-demo"
:collapse="isopen"
text-color="black"
background-color="white"
:default-active="active">
<el-menu-item>
<template slot="title">
<!--公司logo  -->
<el-avatar slot="title"
shape="square" size="medium "
src="imgs/fox2.png" ></el-avatar>
</template>
</el-menu-item>
v-if="val.pid ==null && val.children.length >0">
<template slot="title">
<i :class="val.icon"></i>
<span slot="title">{{}}</span>
</template>
<el-menu-item-group v-for="(v,i) in val.children">
<el-menu-item @click=",v.url)":index="v.url">
<i :class="v.icon"></i>
<span slot="title">{{v.text}}</span></el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item @click=",val.url)" v-else:index="val.url"> <i :class="val.icon"></i>
<span slot="title">{{}}</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header >
<i  :class="headericon" @click="headericons()"></i>
<div >
<el-dropdown @command="command">
<span class="el-dropdown-link">
管理员<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">修改密码</el-dropdown-item>
<el-dropdown-item command="2">基本信息</el-dropdown-item>
<el-dropdown-item divided command="3">退出</el-dropdown-item> </el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-main>
<el-tabs v-model="tabindex" type="card" editable
@tab-remove="removetabs" @tab-click="clicktabs">
<el-tab-pane
:key="item.name"
v-for="(item, index) in tabvals"
:label="item.title"
:name="item.name">
<iframe v-if="src==item.name"  id="mainIframe" name="mainIframe"    frameborder="0":src="src":
class="iframe" scrolling="none">
</iframe>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</div>
<script>
var index=new Vue({
el:'#app',
data(){
return{
isopen:false,
headericon:'el-icon-s-fold',
active:'',
id:1,text:'后台管理',pid:null,url:'ctr/admin',icon:'el-icon-setting',children:[ {
id:12,
text:'⾸页',
pid:1,
icon:'el-icon-edit',
url:'updateadmin'
}
]
}
],
screenHeight: document.documentElement.clientHeight+"px",
iframeHeight:document.documentElement.clientHeight-41-60+"px",
src:"home.html",
tabindex:'home.html',
tabvals:[{ title:'⾸页', name:'home.html',}],
}
},
methods:{
command(index){
switch(index){
case'1':
break;
case'2':
break;
case'3':
break
}
},
headericons(){
this.isopen==false?this.isopen=true:this.isopen=false;
this.headericon=='el-icon-s-fold'?this.headericon='el-icon-s-unfold'
:
this.headericon='el-icon-s-fold'
},
toClick(text,url){
this.active=url;
let  isok=this.tabvals.filter(tab => tab.name == url);
if(isok.length <1){
this.tabvals.push({title:text,name:url})
this.tabindex=url;
this.src=url;
}else{
this.tabindex=isok[0].name;
this.src=isok[0].name;
}
},
clicktabs(tab){
this.src=tab.name
},
removetabs(tabname){
if(tabname !='home'){
let index=this.tabvals.findIndex(tab=>tab.name ==tabname);
this.tabvals.splice(index,1)
this.tabindex=this.tabvals[index-1].name
this.src=this.tabvals[index-1].name
}
}
},
created(){
}
})
body{
margin:0 auto;
overflow:hidden;
}
.
el-menu{
border-right:0px !important;
}
.el-container{
border:0px !important;
}
.el-main{
margin:0;
padding:0;
vue element adminoverflow:hidden;
}
.
el-menu-vertical-demo:not(.el-menu--collapse){
width:200px;
min-height:400px;
}
.el-header {
background-color: white;
color: #333;
line-height:60px;
border-bottom:1px solid #f6f6f6
}
.el-tabs__header {
padding:0;
position: relative;
margin:000px !important;
}
.el-header i{
font-size:20px;
cursor:pointer;
}
.el-aside {
color: #333;
background-color: white;
}
.el-tabs__new-tab{
opacity:0;
}
.iframe{
border: none;
width:100%;
background-color: #f2f2f2;
}
.el-avatar{
background: white !important;
}
</style>
</body>
</html>
主页⾃⼰建⼀个home.html 就⾏。很简单就不放出来了 第⼀次发喜欢的请点赞，谢谢。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。