<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. guitar pro系列教程(五):Guitar Pro音轨属性之小节的功能

    又到了guitar pro系列教程新的一章,本章节小编将采用图文相结合的方式与大家一起来讨论下关于Guitar Pro小节的功能,感兴趣的小伙伴都可以进来看看哦,如下图所示: 我们看到小节这选项栏中分 ...

  3. Java基础教程——UDP编程

    UDP:User Datagram Protocol,用户数据报协议 服务端: import java.net.*; import java.io.*; public class UdpServer ...

  4. python2.7,python3.6,python3.8多版本windows10安装,pip共存

    1.官网下载安装包,建议安装32位,自动兼容X64 x86是32位,x86-64是64位. 可以通过下面3种途径获取python: web-based installer 是需要通过联网完成安装的 e ...

  5. redis数据量大时bgsave线程阻塞redis原因

    rt 转载 Latency generated by fork In order to generate the RDB file in background, or to rewrite the A ...

  6. mfc 位图本地存储 本地位图读取显示

    一.读取CImage //在绘图函数中直接使用参数pDC,无需定义 CDC* pDC = GetDC(): //读去位图路径,根据实际情况修改 CString loatImagePath = TEXT ...

  7. Java数据结构(十二)—— 霍夫曼树及霍夫曼编码

    霍夫曼树 基本介绍和创建 基本介绍 又称哈夫曼树,赫夫曼树 给定n个权值作为n个叶子节点,构造一棵二叉树,若该树的带权路径长度(wpl)达到最小,称为最优二叉树 霍夫曼树是带权路径长度最短的树,权值较 ...

  8. 整理一下dedecms的相关知识

    dedecms更改数据库连接 文件   data/common.inc.php ------------------------------------------------------------ ...

  9. 倾斜摄影实景三维在智慧工厂 Web 3D GIS 数字孪生应用

      数字化推动钢铁工业转型升级 数字时代,随着数字地球,数字中国,数字工厂等数字化建设的不断深入,以地理信息系统(Geographic Information System, GIS)为基础,融合大数 ...

  10. 第四十章、PyQt显示部件:QGraphicsView图形视图和QGraphicsScene图形场景简介及应用案例

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 Designer中的Graphics V ...