使用elementui实现三级菜单左侧显示以及用户权限修改

menu组件实现三级菜单

左侧菜单栏显示

	<el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="rgb(5, 29, 53)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          router
          @select="selectMenu"
          @open="handleOpen"
          @close="handleClose"
          :unique-opened="true"
          style="border:0"
        >
		//一层一层进行循环
		<template v-for="item in menulist">
            <el-submenu
              v-if="item.childs && item.childs.length"
              :index="item.MenuUrl"
              :key="item.MenuID"
            >
              <template slot="title">
                <i :class="item.MenuIcon"></i>
                <span>{{item.MenuName}}</span>
              </template>

              <!-- 二级菜单 -->
              <template v-for="itemChild in item.childs">
                <el-submenu
                  v-if="itemChild.childs && itemChild.childs.length"
                  :index="itemChild.MenuUrl"
                  :key="itemChild.MenuID"
                >
                  <template slot="title">
                    <i :class="itemChild.MenuIcon"></i>
                    <span>{{itemChild.MenuName}}</span>
                  </template>

                  <!-- 三级菜单 -->
                  <el-menu-item
                    v-for="itemChild_Child in itemChild.childs"
                    :index="itemChild_Child.MenuUrl"
                    :key="itemChild_Child.MenuID"
                  >
                    <i :class="itemChild_Child.MenuIcon"></i>
                    <span slot="title">{{itemChild_Child.MenuName}}</span>
                  </el-menu-item>
                </el-submenu>

                <el-menu-item v-else :index="itemChild.MenuUrl" :key="itemChild.MenuID">
                  <i :class="itemChild.MenuIcon"></i>
                  <span slot="title">{{itemChild.MenuName}}</span>
                </el-menu-item>
              </template>
            </el-submenu>

            <el-menu-item v-else :index="item.MenuUrl" :key="item.MenuID">
              <i :class="item.MenuIcon"></i>
              <span slot="title">{{item.MenuName}}</span>
            </el-menu-item>
          </template>
    </el-menu>

tree组件实现三级菜单

角色管理中对其菜单权限进行编辑

 <el-tree
     ref="menuTree"
     :data="data"
     show-checkbox
     node-key="MenuID"
     :props="{label:'MenuName',children:'childs'}"	//设置后台传回数据的字段显示
     :default-expand-all="true"	//设置默认全部展开
     :default-checked-keys="expandedKeys"	//设置后台返回数据 选中的节点
     @check="menuChange"		//这里选中方法有多个，根据自己需要选择，elementui官网
   ></el-tree>

    menuChange(data, obj) {
    	//之前罗里吧嗦写了200行的ifelse+foreach，后来发现两个值就可以概括所有
	  	let curCheckedKeys = this.$refs.menuTree.getCheckedKeys();
	  	let halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys();	  	
	  	this.allKeys = Array.from(
	    	new Set(curCheckedKeys.concat(halfCheckedKeys))
	  	);
	  	//一般传给后台数据都是需要选中的子节点以及父节点
	  	//allKeys就是传给后台数据的集合
  	}
  	//后台返回数据进行筛选并默认选中,isEnable为是否选中标识
  	fiterMenu() {
      this.expandedKeys = [];
      this.data.forEach((element) => {
        if (element.isEnable) {
          if (element.childs.length == 0) {
            this.expandedKeys.push(element.MenuID);
          } else {
            element.childs.forEach((ele) => {
              if (ele.isEnable) {
                ele.childs.forEach((e) => {
                  if (e.isEnable) {
                    this.expandedKeys.push(e.MenuID);
                  }
                });
              }
            });
          }
        }
      });
      //去重
      this.allKeys = Array.from(new Set(this.expandedKeys));
    },

   

后台返回数据示例

    [
	  {
	    "MenuID": 1000,
	    "ParentID": 1000,
	    "MenuName": "xxxx",
	    "MenuLevel": 1,
	    "MenuUrl": "/xxx",
	    "isEnable": 0,
	    "childs": []
	  },
	  {
	    "MenuID": 1001,
	    "ParentID": 0,
	    "MenuName": "xxxx",
	    "MenuLevel": 1,
	    "MenuUrl": "/xxx",
	    "isEnable": 1,
	    "childs": [
	      {
	        "MenuID": 1002,
	        "ParentID": 1001,
	        "MenuName": "xxxx",
	        "MenuLevel": 2,
	        "MenuUrl": "/xxx",
	        "isEnable": 1,
	        "childs": [
	          {
	            "MenuID": 1012,
	            "ParentID": 1002,
	            "MenuName": "xxxx",
	            "MenuLevel": 3,
	            "MenuUrl": "/xxx",
	            "isEnable": 1
	          },
	          {
	            "MenuID": 1013,
	            "ParentID": 1002,
	            "MenuName": "xxxx",
	            "MenuLevel": 3,
	            "MenuUrl": "/xxx",
	            "isEnable": 1
	          }
	        ]
	      }
	    ]
	  }
	]