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 相关文章推荐
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
BootStrap 导航条实例代码
May 18 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
VUE动态生成word的实现
Jul 26 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
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
《风筝》教学反思
2014/04/10 职场文书
医药营销个人求职信
2014/04/12 职场文书
2014年政工师工作总结
2014/12/18 职场文书
2015年老干部工作总结
2015/04/23 职场文书
酒店员工管理制度
2015/08/05 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python