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

<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>

<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>

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:[
		  {
			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',
		  }
	  ],

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:'',
          }
];

    /**
     * @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;
    },