element ui实现动态侧边菜单栏以及页面布局

薇森

16114人浏览 · 2022-07-17 23:20:54

薇森 · 2022-07-17 23:20:54 发布

一、实现效果

这里以学生成绩管理系统为例，整体布局以及实现效果如下所示：

二、整体布局

整体布局采用elementui 中Container 布局容器组件实现，如下所示。

整个页面布局页面为main.vue，其中左侧菜单栏部分被封装为一个组件（ MenuTree），菜单部分使用elementui 中Menu 菜单组件来实现，其中el-menu当中参数unique-opened为只允许一个展开，参数default-active为默认激活菜单的 index，参数router为在激活导航时以 index 作为 path 进行路由跳转，具体代码如下：

<template>
	<!-- 系统整体页面布局 -->
	<el-container class="el-container">
	  <!-- 页面头部区域 高度默认60px -->
	  <el-header class="el-header">
		 <!-- 应用名称 -->
	      <span>学生成绩管理系统</span>
	  </el-header>
	  <el-container>
	    <!-- 左侧菜单栏部分 -->
	    <el-aside class="el-aside">
			  <el-scrollbar>
				  <el-menu class="el-menu"
					   background-color="#32323a"
					   :unique-opened="true"
					   :default-active="$route.path"
					   text-color="#ffffff"
					   router>
				    <MenuTree :menuList="menuList"></MenuTree>
				  </el-menu>
			  </el-scrollbar>
	    </el-aside>
	    <!-- 右侧主题页面内容展示 -->
	    <el-main class="el-mian">
			  <!-- 路由页面 -->
			  <router-view></router-view>
	    </el-main>
	  </el-container>
	</el-container>
</template>

<script>
import MenuTree from '@/components/menu/menustree.vue';
export default {
  components: {
    MenuTree
  },
  data() {
    return {
      menuList:[
		  {
			id:1,
			parentid:'0',
			name:'系统主页',
			icon:'HomeFilled',
			url:'/homepage',
		  },
		  {
			id:2,
			parentid:'0',
			name:'学生管理',
			icon:'UserFilled',
			children:[
				{
					id:3,
					parentid:'2',
					name:'信息管理',
					icon:'',
					children:[
						{
							id:4,
							parentid:'2',
							name:'密码修改',
							icon:'',
							url:'/password'
						}
					]
				},
				{
					id:5,
					parentid:'2',
					name:'成绩管理',
					icon:'',
					url:'/grade',
				}
			]
		  },
		  {
			id:6,
			parentid:'0',
			name:'课程管理',
			icon:'List',
			url:'/course',
		  }
	  ],
    }
  },
 
}
</script>

<style>
/*铺满屏幕，没有边距*/
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100wh;
}	
.el-header {
/* 顶部部分的高度(默认60px) */
  background-color: #0077d5;
  color: #FFFFFF;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.el-aside {
  width: 200px;
  background-color: #32323a;
  min-height: calc(100vh - 60px);
}

.el-menu {
  width: 200px;
  min-height:100%;
}

.el-menu span {
  margin-left: 10px;
}

.el-mian {
  background-color: #eaedf1;
  padding: 0px;
  margin: 0px;
  height:calc(100vh - 60px);
}		
</style>

三、菜单栏组件

组件为menustree.vue，在上面的布局main.vue中导入，动态菜单数据 menuList（json数组格式）从父组件main.vue传递到该页面，再循环递归实现。注意数据中parentid为0的数据表示为根路径，即最外层，icon为图标，也是使用elementui当中的图标组件，url为跳转路由。具体代码如下所示：

<template>
  <div>
    <template v-for="(item) in menuList">
      <!-- 有次级菜单的,则展开子选项-->
      <el-sub-menu v-if="item.children && item.children.length>0" :key="item.id" :index="item.id">
        <template #title>
		  <el-icon v-if="item.icon!=''"><component :is="item.icon" /></el-icon>
          <span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
        </template>
        <!-- 递归,实现无限级展开 -->
        <MenuTree :menuList="item.children"></MenuTree>
      </el-sub-menu>
      <!-- 没有次级菜单的 -->
      <el-menu-item  v-if="!item.children" :key="item.id" :index="item.url">
		  <el-icon v-if="item.icon!=''"><component :is="item.icon" /></el-icon>
		  <span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import {
	HomeFilled,
	UserFilled,
	List
	} from "@element-plus/icons";
export default {
  props:{
	  menuList:{
		  type:Array,
		  default(){
			  return []
		  }
	  }
  },
  name: 'MenuTree',
  components: {
       HomeFilled,
	   UserFilled,
	   List
  },
  methods: {
    
  }
}
</script>
<style scoped>
.activespan{
	font-size: 15px !important;
}
.disactivesapn{
	margin-left: 20px;
	font-size: 15px !important;
}
/* 菜单栏选中后背景色 */
.el-menu-item {
	 color: #ffffff;
 } 
.el-menu-item.is-active {
	 color: #55aaff;
}	
</style>

四、路由部分

这是使用嵌套路由，将菜单栏各个页面嵌套在main页面右侧展示，重定向是为了让初始右侧页面显示系统主页，具体配置如下所示：

const routes = [
	//  整体布局页面
	{
	    path: '/main',
	    name: 'main',
	    component: () => import("@/views/main"),
		// 重定向，自动跳转到指定路由
		redirect: "/homepage",
		//嵌套路由
		children: [
			{
			    path: '/homepage',
			    name: '系统主页', 
			    component: () => import("@/views/homepage"),
			},
			{
			    path: '/grade',
			    name: '成绩管理', 
			    component: () => import("@/views/grade"),
			},
			{
			    path: '/information',
			    name: '信息管理', 
			    component: () => import("@/views/information"),
			},
			{
			    path: '/password',
			    name: '密码修改', 
			    component: () => import("@/views/password"),
			},
			{
			    path: '/course',
			    name: '课程管理', 
			    component: () => import("@/views/course"),
			}
			
		]
	},
]

五、数据格式

菜单栏数据 menuList为嵌套的json数据格式，在实际开发中， menuList需要从后端构造成嵌套json数组的格式，传递到前端来进行动态数据展示，格式如下：

menuList:[
		  {
			id:1,
			parentid:'0',
			name:'系统主页',
			icon:'HomeFilled',
			url:'/homepage',
		  },
		  {
			id:2,
			parentid:'0',
			name:'学生管理',
			icon:'UserFilled',
			children:[
				{
					id:3,
					parentid:'2',
					name:'信息管理',
					icon:'',
					children:[
						{
							id:4,
							parentid:'2',
							name:'密码修改',
							icon:'',
							url:'/password'
						}
					]
				},
				{
					id:5,
					parentid:'2',
					name:'成绩管理',
					icon:'',
					url:'/grade',
				}
			]
		  },
		  {
			id:6,
			parentid:'0',
			name:'课程管理',
			icon:'List',
			url:'/course',
		  }
	  ],

此外，后端也可以传递过来，如下格式的json数组：

menuList = [
          {
			id:1,
			parentid:'0',
			name:'系统主页',
			icon:'HomeFilled',
			url:'/homepage',
		  },
		  {
			id:2,
			parentid:'0',
			name:'学生管理',
			icon:'UserFilled',
            url:'',
          },
          {
			id:3,
			parentid:'2',
			name:'信息管理',
			icon:'',
            url:'',
          }
];

但是此时需要在前端对其进行构造，变成上面的嵌套的形式才能供菜单栏组件使用，调用以下方法可将上面的数据变为json嵌套数组，（注意，id,name等可以自己命名，对应修改即可）构造的js方法如下：

    /**
     * @FileDescription: 后台获取的菜单列表数据转为无限分类递归树，嵌套JSON数据格式
     */
    totree(data) {
      let map = {};
      let val = [];
      //生成数据对象集合
      data.forEach(it => {
        map[it.id] = it;
      })
      //生成结果集
      data.forEach(it => {
        const parent = map[it.parentid];
        if (parent) {
          if (!Array.isArray(parent.children)) parent.children = [];
          parent.children.push(it);
        } else {
          val.push(it);
        }
      })
      return val;
    },