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

所属分类: JavaScript / 网络编程 阅读数: 244
收藏 0 赞 0 分享

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

  下面是组件所需要的数据

{
 "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 的属性可能多了一些,请根据自己需要删除

更多精彩内容其他人还在看

阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

cancelBubble在IE下有效 stopPropagation在Firefox下有效 复制代码 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi... 查看详情
收藏 0 赞 0 分享

匹配html标记的正则

'>" name= spanName /> 匹配 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]... 查看详情
收藏 0 赞 0 分享

图片向上滚动

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]... 查看详情
收藏 0 赞 0 分享

常用参考资料(手册)下载或者链接

下面是一些常用参考资料(手册)下载或者链接:--中文手册系列(经典产品)-------------------------------------------------W3schools HTML教程 CHM帮助(桃花岛主)http://www.blueidea.com/art... 查看详情
收藏 0 赞 0 分享

測試代碼真方便

測試代碼真方便 Powered by Poorfish Blueidea.com [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能... 查看详情
收藏 0 赞 0 分享

Div+CSS+JS树型菜单,可刷新

搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] ... 查看详情
收藏 0 赞 0 分享

CSS+JS构建的图片查看器

这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE、Firefox 、Opera。JS部分function showPic (whichpic... 查看详情
收藏 0 赞 0 分享

如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。... 查看详情
收藏 0 赞 0 分享

自适应图片大小的弹出窗口

很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。   实现此功能的最简单作法是用以下HTML代码创建一个图像链接:   <a href="fullsize.jpg" targ... 查看详情
收藏 0 赞 0 分享

颜色渐变效果

javascriptboy // Flash table Extension for Dreamwever ,by dio(diopex@sina.com)nereidFadeObjects = new Object();nereidFadeTimers = new Object... 查看详情
收藏 0 赞 0 分享
查看更多