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

一、实现效果

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

 二、整体布局 

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

 

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

三、菜单栏组件 

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

四、路由部分 

这是使用嵌套路由，将菜单栏各个页面嵌套在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;
    },