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>
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- google 调试vue(Vue实现Google第三方登录的示例代码)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- vue路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue引入axios(vue封装axios的几种方法)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
- 中秋节买啤酒,预算超过7元试试这8种啤酒,麦香浓郁都是真啤酒(预算超过7元试试这8种啤酒)
- CellPress旗下的6 期刊,国人友刊来了解一下吧(CellPress旗下的6期刊国人友刊来了解一下吧)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
热门推荐
- 阿里云电脑收费标准是多少(阿里云主机最便宜的多少钱一年?)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- thinkphp返回json(thinkphp5框架实现数据库读取的数据转换成json格式示例)
- python3爬虫代码(Python3爬楼梯算法示例)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- ftp管理用户权限(FTP 分类账户设置经验谈)
- navicat连接mysql报1045(解决Navicat for MySQL 连接 MySQL 报2005错误的问题)
- 阿里云服务器远程密码在哪(教你如何重置阿里云服务器远程连接密码)
- sql server 函数参数表(SQL Server 实现数字辅助表实例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9