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获取url中指定参数值的示例代码
Dec 14 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
ECMAScript6--解构
Mar 30 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
express express-session的使用小结
Dec 12 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
微信小程序个人中心的列表控件实现代码
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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
python修改文件内容的3种方法详解
2019/11/15 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
线程同步的方法
2016/11/23 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
质检员岗位职责
2013/12/17 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
初中班主任寄语
2014/04/04 职场文书
党日活动总结
2014/05/07 职场文书
民事辩护词范文
2015/05/21 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL