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获得keycode的示例代码
Dec 30 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
浅谈node的事件机制
Oct 09 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
关于vue-router-link选择样式设置
Apr 30 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
把PHP安装为Apache DSO
2006/10/09 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
js 小数取整的函数
2010/05/10 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python中使用while循环的实例
2019/08/05 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
基督教婚礼主持词
2014/03/14 职场文书
个人评语大全
2014/05/04 职场文书
主题教育活动总结
2014/05/05 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
小学新教师个人总结
2015/02/05 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
创业计划书之外语培训班
2019/11/02 职场文书