el-menu写菜单栏_el-sub-menu

<template>
  <div>
    <div class="rightSide" @mouseenter="onMouseenter"></div>
    <el-drawer v-model="isShowDrawer" direction="ltr" custom-class="drawer" :size="250">
      <el-menu background-color="rgba(19, 27, 60, 0.95)" text-color="#fff" active-text-color="#409eff" router :default-active="activePath" style="border-right: none" :unique-opened="true" :collapse-transition="true">
 
        <!-- 一级菜单 -->
        <el-sub-menu v-for="item in menulist" :key="item.id" :index="'/'+item.path">
          <template #title>
            <i :class="icons[item.id]"></i>
            <span>{{item.authName}}</span>
          </template>
          <!-- 二级菜单 -->
          <el-sub-menu v-for="item2 in item.children" :key="item2.id" :index="'/'+item2.path">
            <template #title>
              <i class="iconfont icon-caidan"></i>
              <span>{{item2.authName}}</span>
            </template>
            <!-- 三级菜单 -->
            <el-menu-item v-for="item3 in item2.children" :key="item3.id" :index="'/'+item3.path" @click="saveNavState('/' + item3.path)">
              <i class="iconfont icon-erjicaidan-shubiaohuadong" style="font-size:1.2rem;margin-right:0.5rem"></i>
              <span>{{item3.authName}}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </el-drawer>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isShowDrawer: true,
      activePath: "/screen", //保存跳转链接
      icons: {
        1: "iconfont icon-zonghenengyuan",
        2: "iconfont icon-jiankongshexiangtou-xianxing",
        3: "iconfont icon-gaojing",
        4: "iconfont icon-yunwei",
        5: "iconfont icon-xitong",
      },
      menulist: [
        {
          id: 1,
          authName: "能源管理",
          path: "screen",
          children: [
            {
              id: 101,
              authName: "能耗总览",
              path: "screen",
              children: [
                {
                  id: 10101,
                  authName: "驾驶舱",
                  path: "screen",
                  children: [],
                },
                {
                  id: 10102,
                  authName: "驾驶舱2",
                  path: "cockpit",
                  children: [],
                },
                {
                  id: 10103,
                  authName: "GIS地图",
                  path: "home",
                  children: [],
                },
              ],
            },
            {
              id: 102,
              authName: "能耗数据",
              path: "inquire",
              children: [
                {
                  id: 10201,
                  authName: "能耗查询",
                  path: "inquire",
                  children: [],
                },
                {
                  id: 10202,
                  authName: "能耗对比",
                  path: "compared",
                  children: [],
                },
              ],
            },
            {
              id: 103,
              authName: "能耗分析",
              path: "sub-option",
              children: [
                {
                  id: 10301,
                  authName: "能耗分项",
                  path: "sub-option",
                  children: [],
                },
                {
                  id: 10302,
                  authName: "能耗分项2",
                  path: "sub-option2",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          authName: "设备监控",
          path: "cold-heat",
          children: [
            {
              id: 201,
              authName: "暖通空调系统",
              path: "cold-heat",
              children: [
                {
                  id: 20101,
                  authName: "冷热源系统",
                  path: "cold-heat",
                  children: [],
                },
                {
                  id: 20102,
                  authName: "空调箱系统",
                  path: "air-conditioning",
                  children: [],
                },
                {
                  id: 20103,
                  authName: "风机盘管系统",
                  path: "fan-coil",
                  children: [],
                },
              ],
            },
            {
              id: 202,
              authName: "智能监控系统",
              path: "low-voltage",
              children: [
                {
                  id: 20201,
                  authName: "低压配电系统",
                  path: "low-voltage",
                  children: [],
                },
                {
                  id: 20202,
                  authName: "公区照明系统",
                  path: "public-lighting",
                  children: [],
                },
                {
                  id: 20203,
                  authName: "景观照明系统",
                  path: "land-lighting",
                  children: [],
                },
                {
                  id: 20204,
                  authName: "电热水器系统",
                  path: "water-heater",
                  children: [],
                },
                {
                  id: 20205,
                  authName: "电梯监控系统",
                  path: "elevator-monitor",
                  children: [],
                },
                {
                  id: 20206,
                  authName: "广场喷泉系统",
                  path: "square-fountain",
                  children: [],
                },
                {
                  id: 20207,
                  authName: "给排水监控系统",
                  path: "drainage",
                  children: [],
                },
                {
                  id: 20208,
                  authName: "电动遮阳帘系统",
                  path: "electric-sun-shade",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 3,
          authName: "告警管理",
          path: "warn-alarm",
          children: [
            {
              id: 301,
              authName: "告警管理",
              path: "warn-alarm",
              children: [
                {
                  id: 30101,
                  authName: "当日告警",
                  path: "warn-alarm",
                  children: [],
                },
                {
                  id: 30102,
                  authName: "历史告警",
                  path: "warn-history",
                  children: [],
                },
                {
                  id: 30103,
                  authName: "告警设置",
                  path: "warn-set",
                  children: [],
                },
                {
                  id: 30104,
                  authName: "时间策略",
                  path: "warn-time",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 4,
          authName: "运维管理",
          path: "gd-order-repair",
          children: [
            {
              id: 401,
              authName: "报修管理",
              path: "gd-order-repair",
              children: [
                {
                  id: 40101,
                  authName: "工单报修管理",
                  path: "gd-order-repair",
                  children: [],
                },
                {
                  id: 40102,
                  authName: "工单关单管理",
                  path: "gd-closing",
                  children: [],
                },
                {
                  id: 40103,
                  authName: "工单受单管理",
                  path: "gd-acceptance-sp",
                  children: [],
                },
                {
                  id: 40104,
                  authName: "工单派单管理",
                  path: "gd-orders",
                  children: [],
                },
                {
                  id: 40105,
                  authName: "工单执行管理",
                  path: "gd-implement",
                  children: [],
                },
                {
                  id: 40106,
                  authName: "工单综合管理",
                  path: "production-orders",
                  children: [],
                },
              ],
            },
            {
              id: 402,
              authName: "巡检管理",
              path: "inspect-item",
              children: [
                {
                  id: 40201,
                  authName: "巡检条目",
                  path: "inspect-item",
                  children: [],
                },
                {
                  id: 40202,
                  authName: "巡检内容",
                  path: "inspect-content",
                  children: [],
                },
                {
                  id: 40203,
                  authName: "巡检线路",
                  path: "inspect-line",
                  children: [],
                },
                {
                  id: 40204,
                  authName: "巡检计划",
                  path: "inspect-plan",
                  children: [],
                },
                {
                  id: 40205,
                  authName: "综合管理",
                  path: "inspect-manage",
                  children: [],
                },
                {
                  id: 40206,
                  authName: "异常查询",
                  path: "inspect-abnormal",
                  children: [],
                },
              ],
            },
            {
              id: 403,
              authName: "工程仓库",
              path: "provider",
              children: [
                {
                  id: 40301,
                  authName: "供货管理",
                  path: "provider",
                  children: [],
                },
                {
                  id: 40302,
                  authName: "物品类别",
                  path: "goods-cate",
                  children: [],
                },
                {
                  id: 40303,
                  authName: "物品管理",
                  path: "goods",
                  children: [],
                },
                {
                  id: 40304,
                  authName: "入库管理",
                  path: "enter-warehouse",
                  children: [],
                },
                {
                  id: 40305,
                  authName: "出库管理",
                  path: "out-of-warehouse",
                  children: [],
                },
                {
                  id: 40306,
                  authName: "库存清单",
                  path: "stock",
                  children: [],
                },
                {
                  id: 40307,
                  authName: "台账记录",
                  path: "ledger-rep",
                  children: [],
                },
                {
                  id: 40308,
                  authName: "材料报表",
                  path: "material-rep",
                  children: [],
                },
                {
                  id: 40309,
                  authName: "月度结转",
                  path: "carry-over",
                  children: [],
                },
              ],
            },
            {
              id: 404,
              authName: "设备管理",
              path: "equip-ledger",
              children: [
                {
                  id: 40401,
                  authName: "设备台账",
                  path: "equip-ledger",
                  children: [],
                },
                {
                  id: 40402,
                  authName: "设备档案属性",
                  path: "equip-attr",
                  children: [],
                },
                {
                  id: 40403,
                  authName: "设备模板管理",
                  path: "definition",
                  children: [],
                },
                {
                  id: 40404,
                  authName: "设备档案模板",
                  path: "template",
                  children: [],
                },
                {
                  id: 40405,
                  authName: "生命周期管理",
                  path: "life-time",
                  children: [],
                },
                {
                  id: 40406,
                  authName: "设备预警管理",
                  path: "warn",
                  children: [],
                },
                {
                  id: 40407,
                  authName: "字典管理",
                  path: "dictionary",
                  children: [],
                },
              ],
            },
            {
              id: 405,
              authName: "知识库管理",
              path: "knowledge-uphold",
              children: [
                {
                  id: 40501,
                  authName: "知识库维护",
                  path: "knowledge-uphold",
                  children: [],
                },
                {
                  id: 40502,
                  authName: "知识库检索",
                  path: "knowledge-search",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 5,
          authName: "运维管理",
          path: "staff-manage",
          children: [
            {
              id: 501,
              authName: "运维配置",
              path: "staff-manage",
              children: [
                {
                  id: 50101,
                  authName: "员工管理",
                  path: "staff-manage",
                  children: [],
                },
                {
                  id: 50102,
                  authName: "角色管理",
                  path: "role-manage",
                  children: [],
                },
                {
                  id: 50103,
                  authName: "部门管理",
                  path: "dep-manage",
                  children: [],
                },
                {
                  id: 50104,
                  authName: "仓库管理",
                  path: "ware-manage",
                  children: [],
                },
                {
                  id: 50105,
                  authName: "仓库权限管理",
                  path: "ware-permission",
                  children: [],
                },
                {
                  id: 50106,
                  authName: "维修工时管理",
                  path: "maintain-Hour",
                  children: [],
                },
                {
                  id: 50107,
                  authName: "维修项目",
                  path: "maintain-pro",
                  children: [],
                },
                {
                  id: 50108,
                  authName: "地点管理",
                  path: "place-manage",
                  children: [],
                },
                {
                  id: 50109,
                  authName: "电话管理",
                  path: "phone-manage",
                  children: [],
                },
              ],
            },
            {
              id: 502,
              authName: "用户信息",
              path: "change-pwd",
              children: [
                {
                  id: 50201,
                  authName: "修改密码",
                  path: "change-pwd",
                  children: [],
                },
                {
                  id: 50202,
                  authName: "登录日志",
                  path: "login-log",
                  children: [],
                },
              ],
            },
            {
              id: 503,
              authName: "新闻配置",
              path: "add-news",
              children: [
                {
                  id: 50301,
                  authName: "添加新闻",
                  path: "add-news",
                  children: [],
                },
                {
                  id: 50302,
                  authName: "栏目管理",
                  path: "news-program",
                  children: [],
                },
                {
                  id: 50303,
                  authName: "新闻管理",
                  path: "news",
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    if (window.sessionStorage.getItem("activePath") === null) {
      this.activePath = "/screen";
    } else {
      this.activePath = window.sessionStorage.getItem("activePath");
      console.log("created-activePath", this.activePath);
    }
  },
  methods: {
    onMouseenter() {
      this.isShowDrawer = true;
    },
    //保存链接的激活状态
    saveNavState(activePath) {
      console.log("activePath", activePath);
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
  },
};
</script>
 
 
<style lang="less" scoped>
.rightSide {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  opacity: 0;
}
/deep/.drawer {
  background: rgba(19, 27, 60, 0.95);
}
 
/deep/.el-drawer__body {
  overflow-y: auto;
}
 
// /*定义滚动条样式（高宽及背景）*/
// ::-webkit-scrollbar {
//   width: 5px !important; //对应竖滚动条的宽度
// }
 
// /*定义滑块 样式*/
// ::-webkit-scrollbar-thumb {
//   border-radius: 3px !important;
//   min-height: 50px !important; /* 滚动条滑块长度 */
//   background-color: rgba(42, 213, 252, 0.5) !important;
// }
 
.el-menu-item:hover {
  background: rgba(84, 122, 179, 0.5);
}
 
i {
  margin-right: 0.3rem;
}
</style>