vue-admin-template只有一个子菜单时父级菜单不显示问题

最新推荐文章于 2023-12-14 14:53:00 发布
最新推荐文章于 2023-12-14 14:53:00 发布
阅读量946 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013558749/article/details/122436415
版权

在这里插入图片描述
如上图所示：加上 alwaysShow: true 即可

小白变怪兽
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-admin-template侧边栏二级菜单只有一个时父级菜单不显示的问题
weixin_44986077的博客
12-30 5662
最近进行项目收尾阶段，突然发现当侧边栏菜单只有一个二级菜单时一级菜单消失 网上搜了很多办法，修改Sidebar中的index.vue中的el-menu，将:unique-opened="true"改为true并给item上加上唯一的index，发现不生效，各种尝试后发现在permission.js中修改，代码如下： function filterAsyncRouter(asyncRouterMap) { const accessedRouters = asyncRouterMap.filter(rou
详解使用vue-admin-template的优化历程
08-27
Vue-Admin-Template 是一个基于 Vue.js 的后台管理系统模板，旨在提供一个快速、灵活、可扩展的解决方案。然而，在实际开发中，我们发现了许多问题，例如打包出来的文件体积非常大，影响了用户体验和开发效率。因此...
关于vue-admin-template二级菜单只有一个时父级菜单不显示
DarKer_LB的博客
06-16 600
在路由配置中父级菜单下添加 就可以了
Vue3+Element-plus 导航菜单折叠后不显示图标问题解决
qq_37144341的博客
04-04 1142
使用最新的element plus版本(v2.3.2)写导航菜单时，发现折叠后图标不显示了，最后降低了版本(v2.2.12)可以了，有大佬介绍下什么原因吗。
vue PC端菜单优化（第一个菜单隐藏的时候，整个菜单都不显示）
贤和知识点收藏
11-11 3832
首先先看别人处理的PC端bug 后台管理系统模板问题 由于后台管理系统增加了菜单权限，路由是根据菜单权限动态生成的，当只有一个菜单的权限时，会导致这个菜单可能不显示，参看模板的源码： <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&...
解决“由于开发者通过接口修改了菜单配置，当前菜单配置已失效并停用。你可以前往开发者中心进行停用”
徊忆羽菲
10-09 3879
由于开发者通过接口修改了菜单配置，当前菜单配置已失效并停用。你可以前往开发者中心进行停用。解决方案
2、前后端对接，vue-admin-template前端的操作
最新发布
weixin_53920301的博客
12-14 278
alwaysShow：如果这个模块只有一个子菜单，需要使用alwaysShow：true，可以显示父级列表。不使用这个语句就会只显示子列表菜单，而不显示父菜单。Spring早就给我们提供了解决方案，我们只需要在对应controller上添加一个注解就可以了（@CrossOrigin // 跨域）。url：访问后端方法的路径以及对应的参数，路径参数需要使用${}定义。跨域问题：浏览器对于javascript的同源策略的限制。2、在src/router中定义路由规则。1、前端对接后端提供的接口功能，
vue-admin-template 动态路由
Bug_yellow的博客
08-24 3054
vue-admin-template 动态路由 采用的是 vue-admin-template 后台管理系统模板 1、首先在 router>index.js下面的内容，这部分倒是没有什么特别大的改动： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /** * Note: sub-menu only appear when route children.length >= 1 * Detail
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本，开发工具自动配置教程和项目开发文档。 :seedling: vue3.x vue3.0-antdv分支（ant-design-vue） # 克隆...
vue-admin-template-master.zip
12-05
在"vue-admin-template-master.zip"这个压缩包中，我们很显然有一个使用Vue CLI 3搭建的项目模板，其中集成了Element UI作为UI框架。 首先，让我们详细了解一下Vue CLI 3。Vue CLI 3 提供了一套全面的脚手架工具，...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
Vue-admin-template是基于Vue.js的一个后台管理系统模板，它提供了一个快速开发后台应用的基础架构。这个模板通常包含路由、组件、状态管理（Vuex）以及API调用等核心功能，极大地简化了开发流程。 在“学习vue-...
vue-admin-template-4.4.0.zip
03-01
4. **Vue-admin-template**：这个模板可能包含了一些常见的后台管理界面元素，如表格、表单、图表、分页、多级菜单等。它可能已经预配置了axios库用于HTTP请求，Element UI或Ant Design Vue等UI组件库，以及Vue ...
elementUI中el-tree的半选框父级不选中与全选框父级选中问题(让数据中子级不全选中时，父级不选中即半选)
cabinx的博客
06-07 6313
elementUI中el-tree的处理数据时半选框父级选中问题(让数据中子级不全选中时，父级不选中即半选) 1.业务需求： 在后台权限管理系统中，在菜单管理模块中分配当前角色的菜单权限时，菜单权限的初始状态获取时，后端返回数据结构一般是一个菜单的树形结构与一个菜单选中的list列表。然后前端需要将两者进行匹配，然后追加到el-tree树形中。其中子级全选时，父级也会选中，但是由于el-tree的设计原理，当子级未全选中时，父级是不会选中的(此时为半选)，因此，此时在传给后端的list中是没有父级的，由于
vue-admin根据用户级别（权限）过滤路由
ordinary24的博客
10-06 1135
使用的是vue-admin基础版本，所以使用者要对登录过滤等流程相当熟悉 //登录界面 src/views/login/index.vue <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> //登录方法 handleLogin() { this.
vue-admin-template基础模板使用(六)
shuleijia的博客
08-31 540
用户权限
vue-element-admin路由——再也不怕几级路由了
kaixinvz的博客
03-30 2308
路由问题真的是折腾了我老长时间.....本人自己摸索不喜勿喷，下面是三级路由格式 path部分是页面地址，必须跟文件夹的路径是相同的 alwaysShow：true特别重要，是 是否下级的展示的重要字段，各位可以自行试试删除掉看有什么效果。 component引用文件是父级的文件，而且文件里一定要写router-view,再子子级的comonent一定要引用正确，防止路径要不到，再也不怕几级路由了 ...
vue:动态菜单只有一个子菜单时父级菜单不显示问题
tomorrownan的博客
10-29 8281
使用vue-admin-template后台管理模板的项目中使用了动态路由，就是显示后端接口返回的路由。第二次遇到父级菜单不显示的问题，第一次解决的方法没有记录，便又思考了一会。这里记录下。 父级菜单下有多个字菜单的父级都可以正常显示，只有父级下是一个子菜单的父级菜单不显示。所以断定是因为只有一个子菜单，父级隐藏不显示属性引起的。在处理从后台接口拿到的菜单数据时设置alwaysShow: true...
vue-element-admin-master框架结合element UI 组件 权限的问题以及element 组件使用中遇到的问题
汉堡请不要欺负面条
04-03 1万+
一、细节注意点 1.settings.js 文件 1.showSettings: false,//右边设置 是否关闭 2.tagsView: false,导航栏是否关闭 3.fixedHeader: false, 4.sidebarLogo: true,左边菜单顶部是否显示标题和logo 2.permission.js 是权限控制的 二、业务操作 1.主菜单......
element-ui 实现行合并
热门推荐
小白变怪兽
08-31 2万+
目标样式： 首先先来看下我们拿到的返回数据： tableData: [ { productType: &amp;quot;纺织品&amp;quot;, price: 123, productName: '男装上衣', amount: 20, operate_number: &amp;quot;20180831142020&amp;quot;, ...
vue-admin-template如何实现点击父级动态菜单,同父级菜单自动收缩
05-20
在 `vue-admin-template` 中，动态菜单的数据是通过 `router` 配置生成的。要实现点击父级动态菜单时同父级菜单自动收缩，可以在菜单组件中监听父级菜单的点击事件，在点击父级菜单时触发相应的方法来收缩同级菜单。 具体实现步骤如下： 1. 在 `src/layout/components/Sidebar/index.vue` 中找到菜单组件 `SidebarItem` ，并在 `SidebarItem` 组件中添加 `click` 事件监听器。 ```html <template> <el-submenu v-if="item.children && item.children.length > 0" :index="item.path"> <template slot="title"> <i :class="`iconfont ${item.meta.icon}`"></i> <span slot="title">{{ item.meta.title }}</span> </template> <sidebar-item v-for="(child, index) in item.children" :key="index" :item="child" :parent-path="item.path" :router="router" :opened="openedMenus.includes(item.path)" @click.native="handleClick" // 添加 click 事件监听器 ></sidebar-item> </el-submenu> <el-menu-item v-else :index="item.path"> <router-link :to="item.path"> <i :class="`iconfont ${item.meta.icon}`"></i> <span slot="title">{{ item.meta.title }}</span> </router-link> </el-menu-item> </template> <script> export default { name: "SidebarItem", props: { item: { type: Object, required: true, }, parentPath: { type: String, default: "", }, router: { type: Object, required: true, }, opened: { type: Boolean, default: false, }, }, data() { return { openedMenus: [], // 当前展开的菜单 }; }, mounted() { this.handleOpenedMenus(); }, methods: { handleClick() { if (this.parentPath) { // 如果有父级菜单，则收缩同级菜单 this.$emit("collapse", this.parentPath); } }, handleOpenedMenus() { // 记录当前展开的菜单 if (this.opened && this.item.path) { this.openedMenus.push(this.item.path); } }, }, }; </script> ``` 2. 在 `Sidebar` 组件中监听 `SidebarItem` 组件的 `collapse` 事件，并在事件处理方法中更新当前展开的菜单列表。 ```html <template> <el-menu :default-active="$route.path" class="sidebar-menu" :collapse="isCollapse" :unique-opened="true" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > <sidebar-item v-for="(item, index) in sidebar" :key="index" :item="item" :router="router" :opened="openedMenus.includes(item.path)" @collapse="handleCollapse" // 添加 collapse 事件监听器 ></sidebar-item> </el-menu> </template> <script> import SidebarItem from "./SidebarItem"; export default { name: "Sidebar", components: { SidebarItem, }, props: { sidebar: { type: Array, required: true, }, isCollapse: { type: Boolean, default: false, }, }, data() { return { openedMenus: [], // 当前展开的菜单 }; }, methods: { handleCollapse(path) { // 更新当前展开的菜单列表 if (this.openedMenus.includes(path)) { this.openedMenus.splice(this.openedMenus.indexOf(path), 1); } else { this.openedMenus.push(path); } }, }, }; </script> ``` 这样，点击父级动态菜单时，同级菜单就会自动收缩了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值