<el-menu class="left-menu" :default-active="$route.name" :unique-opened="true" :collapse="isCollapse">
      <template v-for="(m, x) in menuOpts.data" >
        <el-submenu v-if="m.children.length && m.show" :index="m.value" class="level1-menu" :key="x">
          <template slot="title">
            <e-icon :name="m.icon"></e-icon>
            <span>{{m.label}}</span>
          </template>
          <el-menu-item-group v-if="m.children.length && m.show == true">
            <template v-for="c in m.children">
              <el-submenu v-if="c.children && c.show == true" :index="c.value">
                <template slot="title">{{c.label}}</template>
                <el-menu-item class="level2-menu submenu" v-for="(child, s) in c.children" :key="s" @click.native="stateGo(child.value,1)" :index="child.value">{{child.label}}</el-menu-item>
              </el-submenu>
              <el-menu-item v-if="!c.children && c.show == true" :index="c.value" @click.native="stateGo(c.value,2)" class="level2-menu submenu">
              <template slot="title">
                <span>{{c.label}}</span>
              </template>
            </el-menu-item>
            </template>
          </el-menu-item-group>      
        </el-submenu>
        <el-menu-item v-if="!m.children.length && m.show == true"
          :index="m.value" @click.native="stateGo(m.value,0)" class="level1-menu submenu" :key="x">
          <e-icon :name="m.icon"></e-icon>
          <span slot="title">{{m.label}}</span>
        </el-menu-item>
      </template>
    </el-menu>
 
数据  
menuOpts: {
 data: [
            {
              value: 'onBoard',
              label: '入职管理',
              icon: 'card',
              show: true,
              children: [
                {
                  value: 'home',
                  label: '入职首页',
                  icon: 'desktop',
                  show: true,
                },
                {
                  value: 'onBoard.joined',
                  label: '已入职',
                  show: true
                },
                {
                  value: 'onBoard.history',
                  label: '历史已入职',
                  show: true
               }
              ]
            },
            {
              value: 'renewal',
              label: '合同续签',
              icon: 'card',
              show: true,
              children: [
                {
                  value: 'renewal.waiting',
                  label: '待续签',
                  show: true
                },
                {
                  value: 'renewal.joined',
                  label: '已续签',
                  show: true
                },
                {
                  value: 'renewal.unjoined',
                  label: '未续签',
                  show: true
                },
              ]
            },
{
              value: 'system',
              label: '系统配置管理',
              icon: 'setting',
              show: true,
              children: [
                {
                  value: 'system.tenant',
                  label: '租户定义',
                  show: true,
                },
                {
                  value: 'system.renewal',
                  label: '合同续签',
                  show: true,
                  children: [
                    {
                      value: 'system.renewal.material',
                      label: '资料配置',
                      show: true
                    },
                  ]
                },
                {
                  value: 'system.leave',
                  label: '离职管理',
                  show: true,
                  children: [
                    {
                      value: 'system.leave.material',
                      label: '资料配置',
                      show: true
                    },
                  ]
                },
              ]
            }
          ],
          active: 'home'
}

element ui 左侧导航栏的更多相关文章

  1. 6 vue-element.ui 左侧导航栏

    <template> <div> <el-menu :default-active="'/'+activeIndex2" mode="ver ...

  2. 修改layui的后台模板的左侧导航栏可以伸缩

    原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...

  3. dedecms左侧导航栏不显示问题

    dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: ​ 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...

  4. CI框架后台添加左侧导航栏出现的一系列问题

  5. MFC office2007风格设置左侧导航栏 [转]

    当基础的框架搭好以后,我想为其添加一个左侧导航栏,过程如下:在框架类的头文件添加一个导航栏参数: CMFCOutlookBar m_navigation; 为了完善功能,在导航栏里面我添加了一个CTr ...

  6. ElementUI+命名视图实现复杂顶部和左侧导航栏

    在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...

  7. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  8. 前端(各种demo)二:左侧导航栏的折叠和打开(不使用js)基础版和升级版

    1.给div设置定位. 复习一下—— css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed: ...

  9. [转]layui点击左侧导航栏,实现不刷新整个页面,只刷新局部

    本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...

随机推荐

  1. FL studio系列教程(十四):如何在FL Studio播放列表中排列样式

    我们在FL Studio中做好了节奏样式后就可以在播放列表窗口中进行乐曲的编排了.刚接触这款软件的同学肯定会对如何编排比较陌生但也比较憧憬的,因为它是从一个窗口到另一个窗口中的操作.其实明白了这里的知 ...

  2. Acwing 245.你能回答这些问题吗

    题目描述 给定长度为N的数列A,以及M条指令,每条指令可能是以下两种之一: 1."1 x y",查询区间 [x,y] 中的最大连续子段和,即 maxx≤l≤r≤y{∑ri=lA[i ...

  3. Kafka入门之producer

    一些重要的参数: 1.acks指定了在给producer发送响应前,leader broker必须要确保已成功写入该消息的副本数.当前acks有3个取值,0,1,和all 2.buffer.memor ...

  4. 如何测试一个APP

    1.是否支持各种手机系统 2.是否会因为分辨率而出错 3.不同机型能否安装 4.老旧机型 能否通用 5.广告时长 6.测试能否登陆注册 7.卸载时是否会发生意外 8.安装时会不会误认为带病毒 9.用户 ...

  5. 网络 华为 ensp 命令

    VLAN 端口有三种模式:access,hybrid,trunk. Access类型端口:只能属于1个VLAN,且该端口不打tag,一般用于连接计算机端口: Trunk类型端口:可以允许多个VLAN通 ...

  6. PADS CAM光绘输出文件设置

    PADS CAM光绘输出文件设置 在使用PADS完成电路板的设计后,通常还需要在CAM350中经过一些处理生成Gerber文件,交给制板厂商进行电路板的生产,这就要求在PADS中设置生成CAM文件,然 ...

  7. R语言无网络安装R包,彻底解决依赖问题!

    R version: 3.5.3, 3.6.3 更新日期: 2020-9-10 大家测试后多提建议哈, 有问题我会持续更新的 在工作中,我们使用的服务器通常是不能联外网的,这在安装R包的时候产生了巨大 ...

  8. python装饰器基础及应用

    一.简介 装饰器是是修改其它函数功能的函数:其意义是让其他函数在不修改任何代码的前提下增加额外功能 二.数据类型 首先我们来看一段简单的代码: from types import MethodType ...

  9. 区块链知识博文1: 共识算法之争(PBFT,Raft,PoW,PoS,DPoS,Ripple)

    注:这是本人读到的关于共识算法最全和最好的分享博文,系统的介绍了拜占庭容错技术以及共识算法的原理和常用共识算法,原文链接请见后. 目录 一.拜占庭容错技术(Byzantine Fault Tolera ...

  10. 第8.7节 Python类__new__方法和构造方法关系深入剖析:__new__方法执行结果对__init__的影响案例详解

    一. 引言 前面章节介绍了类中的构造方法和__new__方法,并分析了二者执行的先后顺序关系.__new__方法在__init__方法前执行,__new__方法执行后才返回实例对象,也就是说__new ...