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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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+MYSQL实现用户的增删改查
2015/03/24 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JS仿JQuery选择器功能
2017/03/08 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
通过实例了解python property属性
2019/11/01 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
机械设计制造专业个人求职信
2013/09/25 职场文书
学校七一活动方案
2014/01/19 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
司机个人年终总结
2015/03/03 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers