element 中 el-menu 组件的无限极循环思路代码详解


Posted in Javascript onApril 26, 2020

实现思路主要组件嵌套(组件自己调用自己)

下面是组件所需要的数据

{
 "code": 1,
 "data": {
  "menuVoList": [
   {
    "childList": [
     {
      "childList": [],
      "menu": {
       "createBy": "0-1",
       "createTime": 1587610158,
       "id": "2f006aed6a114579bd8b9809724428f7",
       "name": "系统用户权限管理",
       "parentId": "6d68079a16b94292990f612237bd048e",
       "path": "/userallotrole",
       "updateBy": "0-1",
       "updateTime": 1587610221
      }
     },
     {
      "childList": [],
      "menu": {
       "createBy": "0-1",
       "createTime": 1587605059,
       "id": "c948265cdf27420eb7b6b502292c5990",
       "name": "系统用户管理",
       "parentId": "6d68079a16b94292990f612237bd048e",
       "path": "/user",
       "updateBy": "0-1",
       "updateTime": 1587610230
      }
     }
    ],
    "menu": {
     "createBy": "0-1",
     "createTime": 1587605025,
     "id": "6d68079a16b94292990f612237bd048e",
     "name": "用户管理",
     "parentId": "",
     "path": "/#",
     "updateBy": "0-1",
     "updateTime": 1587610117
    }
   },
   {
    "childList": [
     {
      "childList": [],
      "menu": {
       "createBy": "0-1",
       "createTime": 1587469457,
       "id": "d4b70897052742bb860cf14cea8cf131",
       "name": "新建/修改菜单",
       "parentId": "82e5ca1ab2e04d8faffeb973286771ec",
       "path": "/newMenu",
       "updateBy": "0-1",
       "updateTime": 1587469457
      }
     }
    ],
    "menu": {
     "createBy": "0-1",
     "createTime": 1587469385,
     "id": "82e5ca1ab2e04d8faffeb973286771ec",
     "name": "菜单管理",
     "parentId": "",
     "path": "",
     "updateBy": "0-1",
     "updateTime": 1587469426
    }
   },
   {
    "childList": [
     {
      "childList": [],
      "menu": {
       "createBy": "0-1",
       "createTime": 1587468494,
       "id": "3a092edd120d40b79322d8486e53e5a1",
       "name": "系统角色管理",
       "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
       "path": "/setrole",
       "updateBy": "0-1",
       "updateTime": 1587469340
      }
     },
     {
      "childList": [],
      "menu": {
       "createBy": "0-1",
       "createTime": 1587469360,
       "id": "61d0e4fecbed407d89b1ea5878072374",
       "name": "设置角色权限",
       "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
       "path": "/authorization",
       "updateBy": "0-1",
       "updateTime": 1587469360
      }
     },
     {
      "childList": [],
      "menu": {
       "createBy": "0-1",
       "createTime": 1587469520,
       "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0",
       "name": "权限管理",
       "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
       "path": "/resource",
       "updateBy": "0-1",
       "updateTime": 1587624251
      }
     }
    ],
    "menu": {
     "createBy": "0-1",
     "createTime": 1587468417,
     "id": "ce5704f647d341fe8334ad12c6dd4a6b",
     "name": "角色管理",
     "parentId": "",
     "path": "",
     "updateBy": "0-1",
     "updateTime": 1587468417
    }
   }
  ]
 },
 "message": "成功"
}

 现在我们来设置组件 (在 componet 文件夹里面建一个 menu.vue) 代码如下

<template>
 <div>
  <template v-for="value in menuData">
   <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name"> //判断传进来的数据中 childList 数组length 是否大于零, 如果大于零表示 不是不需要在循环下去了
    <template slot="title">
     <i class="el-icon-s-tools" />
     <span slot="title">{{ value.menu.name }}</span>
    </template>
    <MenuTree :menu-data="value.childList" />
   </el-submenu>
   <el-menu-item v-else :index="value.menu.path">
    <span slot="title">{{ value.menu.name }}</span>
   </el-menu-item>
  </template>
 </div>
</template>
<script>
export default {
 name: 'MenuTree',
 props: ['menuData']
}
</script>
<style lang="scss" >
.el-submenu__title i {
 color: #fff;
}
.el-menu--collapse {
 width: 54px;
}
</style>

接下来 在需要使用 menu 组件的地方引入刚才定义的组件

<template>
   <el-menu
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#4A5A74"
    active-text-color="#ffd04b"
    text-color="#fff"
    :unique-opened="true"
    :default-active="this.$route.path"
    @select="handleSelect"
   >
    <menuTree :menu-data="list" />
   </el-menu>
</template>
 
import menuTree from '@/component/menu'
export default{
 components: {
  menuTree
 },
data: {
  list: [] 
},
methods: {
   getMenuList({}).then(res => { //我这里是请求后台得来得数据,没有数据直接用我上面得数据,不过得像我下面这样处理
    if (res.status === 200) {
     this.list = res.data.data.menuVoList
    }
   })
}
}

 这样,em-menu 组件的无限极循环便实现了,注意,我 上面代码中 el-menu 的属性可能多了一些,请根据自己需要删除

到此这篇关于element 中 el-menu 组件的无限极循环的文章就介绍到这了,更多相关el-menu 组件无限极循环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
vue.js实现简单购物车功能
May 30 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 #Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 #Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 #Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 #Javascript
jquery检测上传文件大小示例
Apr 26 #jQuery
element中的$confirm的使用
Apr 26 #Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
JS中style属性
2006/10/11 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python内建模块struct实例详解
2018/02/02 Python
python抖音表白程序源代码
2019/04/07 Python
python处理document文档保留原样式
2019/09/23 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
舞蹈教育学专业推荐信
2013/11/27 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
高中生期末评语
2014/01/28 职场文书
表彰先进的通报
2014/01/31 职场文书
便利店促销方案
2014/02/20 职场文书
大学生个人学习总结
2015/02/15 职场文书
开除通知书范本
2015/04/25 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电