vue实现树形结构菜单(vue递归实现三级菜单)
类别:编程学习 浏览量:2518
时间:2022-03-28 01:55:52 vue实现树形结构菜单
vue递归实现三级菜单本文实例为大家分享了vue递归实现三级菜单的具体代码,供大家参考,具体内容如下
父组件
<template> <li class="menu-level-menu menu-level-menu-enter" v-if="showLevelMenu"> <menu-item class="menu-item" :menuDate="menuList"></menu-item> </li> </template>
子组件
<template> <li> <li class="" v-for="(menu, index) in menuDate" :key="index"> // 每一个菜单项 <li class="menu-row" @click="menuSpread(menu)" :class="[{'menu-row-selected': menu.selected && menu.children.length <= 0}]"> <li class="menu-row-left"> <li class="menu-row-left-line" :class="[{'menu-selected': menu.selected && menu.children.length <= 0}]"></li> <i class="iconfont" :class="[menu.menuIcon, {'color-icon': showIconColor(menu)}]"></i> </li> <li class="menu-row-right"> <span :class="[{'font-16': menu.level === '0'}]">{{menu.menuName}}</span> <i class="c" v-if="menu.children.length <= 0"></i> <i class="iconfont icon-liebiaoxiala" v-if="menu.children.length>0 && !menu.selected"></i> <i class="iconfont icon-liebiaoshouqi" v-if="menu.children.length>0 && menu.selected"></i> </li> </li> // 递归展示菜单 <menu-item v-show="menu.selected" v-if="menu.children.length>0" :menuDate="menu.children"></menu-item> </li> </li> </template> <script> export default { props: { menuDate: Array }, name: 'MenuItem', methods: { menuSpread (menu) { if (menu.menuRouter) this.$router.push(menu.menuRouter); menu.selected = !menu.selected; this.recursion(this.menuDate, menu); }, recursion (all, temp) { all.forEach(item => { if (item.menuName !== temp.menuName) { item.selected = false; this.recursion(item.children, temp); } }); }, showIconColor (menu) { let show = false; if (menu.level === '0') { menu.children.forEach(item => { if (item.children.length <= 0 && item.selected) { show = true; } if (item.children.length > 0) { item.children.forEach(item => { if (item.selected) { show = true; } }); } }); } return show; } } }; </script>
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue时间转换(vue如何动态实时的显示时间浅析)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
热门推荐
- ASP.NET中Web API的简单实例
- springboot怎么设置docker(Docker如何给Springboot项目动态传参的实现方法)
- win7 ftp服务器怎么搭建(win7下利用IIS搭建FTP服务器)
- powerdesigner 如何加索引
- python代码返回值(Python 函数返回值的示例代码)
- ftp文件管理工具(ftp服务器PDF文件在线查看的实现方法)
- dedecms标签解析(Dedecms网站给图片alt属性自动调用标题的方法)
- bootstrap怎么用虚线框(Bootstrap网页布局网格的实现)
- python常用的切片操作(使用python PIL库实现简单验证码的去噪方法步骤)
- Python实现FTP弱口令扫描器的方法示例(Python实现FTP弱口令扫描器的方法示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9