使用ElementUI实现简单的后台管理首页布局

在使用ElementUI实现后台管理首页布局是比较常见的一个需求，下面潘老师就带大家来实现简单的后台管理布局。我这里使用的是vue-cli脚手架整合ElementUI来搭建的环境，如果你还不会整合请参考博文：
[neilian ids=1150]

1）首先我们在components文件夹中新建一个Home.vue组件，作为我们的后台管理首页组件，我们参考ElementUI官方文档中的Container布局容器，来实现该布局，此时Home.vue代码如下：

2）接着我们将Home.vue导入App.vue并注册使用，App.vue代码如下：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

3）查看效果如图：

1）参考官方文档NavMenu 导航菜单中自定义颜色和可折叠菜单的代码，我们稍作修改将Home.vue中的el-aside内代码修改如下：

	
		展开
		收起
	
	
		
			
			
				
				选项1
				选项2
			
			
				选项3
			
			
				
				选项1
			
		
		
			
			导航二
		
		
			
			导航三
		
		
			
			导航四
		
	

2）将菜单的右侧边框宽度去除以及设置展开时菜单宽度，所以添加如下样式：

/* 去除菜单右侧边框 */
.el-menu{
  border-right: none;
}
/* 设置展开时菜单宽度 */
.el-menu-vertical:not(.el-menu--collapse) {
	width: 230px;
}

3）定义isCollapse属性，脚本如下：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

4）此时效果如图：

头部我这里将其划分为3块，最左侧为logo区域，其右侧有一个可折叠菜单按钮（优化可折叠样式），最右侧可以放在一些头部菜单，我们这里最右侧只放置用户信息即可。
1）设置el-header的z-index为最上层，否则会被Main和Aside遮挡，因此在修改.el-header样式如下：

/*设置背景色，方便观察效果*/
.el-header{
	background-color: #0074D9;
	/* 上层显示，避免被Main和Aside遮挡 */
	z-index: 999;
}

2）删除Aside中el-radio-group展开收起组件，我们将其放到Header中，el-header整体代码如下：

	
	商城管理系统
	
	

		
		
	
	
	
	  
		
	  
	  
		注销
	  
	

3）新增对应的样式如下：

/* logo */
.logo{
	color: #fff;
	text-align: center;
	font-size: 26px;
	line-height: 50px;
	padding: 0 15px;
	font-weight: 400;
	text-decoration: none;
}
/* 折叠按钮 */
.toggle{
	color: #fff;
	text-align: center;
	font-size: 26px;
	line-height: 50px;
	display: inline-block;
	padding: 0 15px;
	border-left: solid 1px #ccc;
	position: absolute;
	left:230px;
	cursor: pointer;
}
.toggle:hover{
	background-color: #ffd04b;
}
/* 下拉菜单 */
.el-dropdown{
	color: #fff;
	text-align: center;
	font-size: 26px;
	line-height: 50px;
	float: right;
}

4）测试样式如下：

el-main组件中可以结合vue-router路由嵌套实现页面的跳转与显示，至此我们整个基于ElementUI的简单后台布局就完成了。
[v_notice]PS：以下附上Home.vue的完整代码：[/v_notice]

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问