资讯专栏INFORMATION COLUMN

vue + element UI NavMenu多级菜单 只保持一个子菜单的展开

CoreDump / 2093人阅读

摘要:本文章为三级目录菜单处理可根据自己需求调整本文章适用于已熟悉控件及的伙伴结构数据结构及方法方法下面代码中有部分是处理全局路由状态的,我这边是每个页面需要显示当前页面,如果不需要显示的可以忽略其他方法,主要看方法就可以了方法调用在了见第一张

本文章为三级目录菜单处理(可根据自己需求调整)
本文章适用于已熟悉element NavMenu控件及vue的伙伴
1、dom 结构

2、数据结构及方法

方法:下面代码中有部分是处理全局路由状态的,我这边是每个页面需要显示当前页面title,如果不需要显示的可以忽略其他方法,主要看onMenu方法就可以了
onMenu方法调用在了:default-openeds="onMenu"(见第一张图)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94201.html

相关文章

  • Vue + Vue-router + Element-ui 搭建个非常简单dashboard d

    摘要:但是有边框,不好看啊再次美化使用使用图标库安装这里主要贴一下的改动,其他的代码就不贴了看下效果图标什么的都有了。另外文件需要加上看看效果点击菜单,路径跳转,并且每次都是单独去加载路由的文件。 做完这个demo后,我体会到,Vue组件化,webpack, Vue-router等,并不是很难学习,你需要的只是拿起斧头的勇气在做demo的过程中,我遇到一个问题,就是vue-router懒加载...

    Near_Li 评论0 收藏0
  • 饿了么组件库,element-ui开发精美后台管理系统系列之()开发伸缩菜单

    摘要:先看这个值即为判断显示展开还是收缩状态的开关。这样就实现了展开状态下的菜单。如果有时间的话,我会把这个系列写完,知道朋友们能独立开发一个完整的的单页面后台管理程序。 涉及到路由,权限等等相关内容的部分,跟本文主旨关系不大,所以我将会在另外一篇文章中详述,混在一起的话内容太多了 基于element-ui的左侧可伸缩的菜单通过vuejs来开发支持展开收缩的菜单是非常简单的,只需要v-i...

    whlong 评论0 收藏0
  • webpack+vue项目实战(二,开发管理系统主页面)

    摘要:运行一下,发现路由变了,当前项有标识了,子菜单的显示与隐藏也有了原理也很简单。 1.前言 上篇文章(webpack+vue项目实战(一,搭建运行环境和相关配置))搭建了好了基本的一个项目目录,安好好了一些要用到的依赖,以及把项目跑了起来。接下来,我们就进行第二步的操作,第二步就是做好一个开发系统的主页面,这个页面主要也就是一个侧边栏,通过侧边栏的各个选项来进行操作(切换各个组件)。比如...

    Harpsichord1207 评论0 收藏0
  • [TsAdmin]--款基于Vue.js+Element UI单页无刷新(无iframe)多选项

    摘要:现在是不是有些期待这套全新的后台管理系统模板呢那现在就去看看的预览版本是什么样的吧欢迎大家对踊跃吐槽。同时也欢迎加入码友网的群更有其他学习资源和干货下载,欢迎入群。本文出至码友网一款基于的单页无刷新无多选项卡的后台管理系统模板 前言 很高兴今天在这里跟大家分享一款全新的后台管理系统UI模板--TsAdmin. TsAdmin是码友网自主开发的一款基于Vue.js+Element UI...

    junnplus 评论0 收藏0
  • 折叠多级菜单实现方法

    摘要:对于在网页上展示的课本目录这样的多级菜单,想要实现完整显示某一章的目录,其它章只显示章名的效果,最开始用的是作为关键字搜索,但是找到的语句并没有效果。注各章标签的类名为,需完整显示的那一章的类名为。 对于在网页上展示的课本目录这样的多级菜单,想要实现完整显示某一章的目录,其它章只显示章名的效果,最开始用的是 hide all child elements but first 作为关键字...

    wangbjun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<