在管理后台需要按用户权限展示不同导航菜单时,我们需要从后端请求数据来进行菜单渲染。

但由于v-for与v-if不能在同一标签内使用(存在性能问题:v-for 具有比 v-if 更高的优先级,意味着 v-if 将分别重复运行于每个 v-for 循环中),所以我们需要将其分别放在不同标签内,v-for放在父级,v-if放在子级。

同时,由于使用实体实体标签作为v-for载体,将会影响el-menu的list结构,因此,我们将v-for放在template标签中。

代码如下(以三级菜单为例):

html

  <el-menu>
<div class="side-bar-title">后台管理</div>
<template v-for="menu_0 in menuData">
<el-submenu v-if="menu_0.childMenu" :index="menu_0.id" :key="menu_0.id">
<template slot="title">{{menu_0.name}}</template>
<template v-for="menu_1 in menu_0.childMenu">
<el-submenu v-if="menu_1.childMenu" :index="menu_1.id" :key="menu_1.id">
<template slot="title">{{menu_1.name}}</template>
<template v-for="menu_2 in menu_1.childMenu">
<el-menu-item :index="menu_2.url" :key="menu_2.id">{{menu_2.name}}</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="menu_1.url" :key="menu_1.id">{{menu_1.name}}</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="menu_0.url" :key="menu_0.id">{{menu_0.name}}</el-menu-item>
</template>
</el-menu>

js

export default {
data () {
return {
menuData: [
  {
name: "一级导航-1",
     id: "1",
parentId: 0,
     url: "comment1",
childMenu:[
{
       id: "3",
       name: "二级导航",
       parentId: 1,
       url: "comment3",
       childMenu:[
        {
         id: "4",
         name: "三级导航",
         parentId: 3,
         url: "comment4"
        }]
      }],
     },{
      id: "2"
      name: "一级导航-2"
      parentId: 0
      url: "comment2"
     }]
   }
}
}

vue、element-ui 依权限动态导航 v-for、v-if的更多相关文章

  1. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  2. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  3. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  4. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  5. Vue + Element UI 实现权限管理系统(动态加载菜单)

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  6. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  7. Vue + Element UI 实现权限管理系统(第三方图标库)

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  8. Vue + Element UI 实现权限管理系统 (管理应用状态)

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

  9. Vue + Element UI 实现权限管理系统(搭建开发环境)

    技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

  10. Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

随机推荐

  1. Logstash学习之路(三)Logstash处理时区、类型转换、删除字段的案例配置

    #输入 input { file { path => ["文件路径"] #自定义类型 type => "自定义" start_position =& ...

  2. shelll中test命令的使用【转】

    Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于 ...

  3. Ocelot一个优秀的.NET API网关框架

    1 什么是Ocelot? Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由.请求聚合.服务发现.认证.鉴权.限流熔断.并内置了负载均衡器与Service Fab ...

  4. Linux调整lvm逻辑分区大小

    转载自:https://www.cnblogs.com/kevingrace/p/5825963.html  个人记录一下   Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系 ...

  5. innnodb_doublewrite

    有写场景下,双写缓冲确实没必要,例如,你也许像在备库上禁用双写缓冲,此外,一些文件系统,例如zfs做了同样的事,所以,没必要再让innodb做一遍. innodb_double_write=0 即可关 ...

  6. 【Linux】NFS相关小问题

    NFS一些小问题: 1. 由于实验环境中,给了rw权限,但是执行的时候,还是提示Permission denied 于是查看nfs服务端,查看/etc/exports文件是否配置有问题 网上很多人配置 ...

  7. 【Linux】NFS搭建及使用详解

    环境:CentOS release 6.8 server  192.168.25.100 client1 192.168.25.101 client2 192.168.25.102 1.服务端操作 1 ...

  8. 用kubeadm+dashboard部署一个k8s集群

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: 1. 安装要求 在开始之前,部署Kubernetes集群 ...

  9. oracle 释放表空间到OS(resize)

    1.查看表空间里面的对象 SELECT OWNER AS OWNER, SEGMENT_NAME AS SEGMENT_NAME, SEGMENT_TYPE AS SEGMENT_TYPE, SUM ...

  10. 1.2V升压到3V和3.3V的升压芯片

    1.2V镍氢电池升压到3V和3.3V输出,1.2V升压3V,1.2V升压3.3V稳压输出供电的芯片. PW5100 是一款低静态电流.达效率. PFM 模式控制的同步升压变换器. PW5100 所需的 ...