<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. leetcode 33和 leetcode81

    //感想: 1.对于这两题,我真的是做到吐,这篇博客本来是昨晚准备写的,但是对于这个第二题,我真的做到头痛,实在是太尼玛的吐血了,主要是我也是头铁,非要找到那个分界点. 2.其实之前在牛客网上做过非常 ...

  2. zk下的kafka节点

    zk从某种程度上说是kafka的单点失效组件. /brokers:里面保存了Kafk集群的所有信息,包括每台broker的注册信息,集群上所有topic的信息等. /controller:保存了Kaf ...

  3. 数据共享-spring batch(9)上下文处理

    目录 1 引言 2 开发环境 3 基于 Mybatis-plus 集成多数据源的数据库访问 3.1 pom 文件中引入 Mybatis-plus 3.2 配置及使用多数据源 4 ExecutionCo ...

  4. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  5. PyQt(Python+Qt)学习随笔:Qt Designer中toolBar的toolButtonStyle属性

    tooButtonStyle属性保存主工具栏按钮的样式设置,用来表示工具栏按钮的文字和图标怎么显示. 该属性的可设置值类型为枚举类型Qt.ToolButtonStyle,它包含如下值: 该属性的缺省值 ...

  6. PyQt(Python+Qt)学习随笔:复选框checkBox的tristate属性

    在Qt Designer中,tristate属性是复选框checkBox相比较于QAbstractButton多出来的唯一属性. tristate属性表示复选框是三种状态还是两种状态,如果trista ...

  7. 从Linux源码看Socket(TCP)的accept

    从Linux源码看Socket(TCP)的accept 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就从Linux源码的角度看下Serve ...

  8. Photoshop 2020特别版,内置多款实用插件,功能强大

    Adobe Photoshop 2020特别21.2.1.265版 组件精简 同时优化软件配置,添加多款实用强大的插件,具体详细修改精简内容如下: -精简运行库及更新组件: -精简创意云Creativ ...

  9. v-clickoutsides

    //点击目标元素外侧触发特定事件 使用 v-clickoutsides="clickHandler" import Vue from 'vue' Vue.directive('cl ...

  10. javascript:void(0)用法和常见问题

    javascript:void(0)的用法 下面的代码创建了一个超级链接,当用户以后不会发生任何事.当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果. <a H ...