解决 element.ui 侧边栏设置只显示一个unique-opened 无效

最新推荐文章于 2024-06-25 21:22:37 发布
最新推荐文章于 2024-06-25 21:22:37 发布
阅读量5.7k 收藏 3
点赞数 5
分类专栏： web 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36457584/article/details/107935651
版权

for 循环拿出来放template里面，:unique-opened = true

豆奶dudu
关注
专栏目录
笔记4：主页布局-侧边栏【Vue实战项目：电商管理系统（Element-UI）】
未来来
07-12 2351
文章目录1 整体布局2 完成主页-侧边栏2.1 实现基本的主页布局2.2 美化主页header区域2.3 实现导航菜单的基本结构2.4 通过axios拦截器添加token令牌2.5 获取左侧菜单数据2.6 通过for循环渲染左侧菜单2.7 优化右侧菜单展示2.8 实现侧边栏折叠与展开效果2.9 首页路由的重定向效果2.10 侧边栏路由链接改造 1 整体布局 2 完成主页-侧边栏 2.1 实现基本的主页布局 在 element ui 官网 上查找合适的布局容器 Home.vue <template
vue+element-ui 实现多级侧边栏导航
weixin_44193380的博客
11-22 6352
@效果图 导航菜单 <!--导航菜单--> <el-menu router :default-active="$route.path" v-show="!collapsed" unique-opened> <!-- 左侧导航栏抽取循环部分 将路由列表传给子组件--> <asideBarItem v-for="(router,index) ...
elementui unique-opened侧边栏菜单，是否只保持一个子菜单显示
wang_59881的博客
01-04 4728
vue+elementUI中 menu unique-opened属性 可以控制菜单侧边栏显示，是否只显示一个子菜单 设置 :unique-opened=“true” <el-menu :default-active="$route.path" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :u
vue项目中,为什么elementUI中“NavMenu 导航菜单“中的参数unique-opened设置无效?
qq_38686150的博客
08-16 2128
如图所示，设置完unique-opened为true之后，还需要再设置el-submenu或者el-menu-item中index的唯一性，如果index中有一样的，那么设置的unique-opened就会无效
element-ui侧边栏:default-openeds
最新发布
爱吃Java的羊的博客
06-25 485
当菜单是动态获取时，点击跳转之后如何展开对应的菜单，在watch中监听路由的变化，根据菜单数据源遍历得到对应的index就可以了。element-ui侧边栏实现路由跳转后展开对应侧边栏：default-openeds。当菜单是在本地写死时，如果想展开第一块内容、里面就只写1。
el-menu菜单 -- unique-opened 子菜单唯一性失效
m0_50080847的博客
04-07 1566
总结： 点击的是 el-sub-menu 。 所以 el-sub-menu 的唯一性是必须的。否则 unique-opened 属性不生效
vue项目中为什么"NavMenu 导航菜单"中的参数unique-opened设置无效?
weixin_34368949的博客
01-31 8897
element-UI导航菜单 设置展开时只保持有一个子菜单展开的设置: 我们习惯的是复制下面代码进行细节更改,我开始测试的时候因为后端没有给我接口文档,所以忘记改: index="",所以几个index都是1,所以即使设置了 :unique-opened="true" 也没有实现只一个子菜单打开,纯属马虎,希望大家不要犯一样的错误!!!!! 转载于:https://juejin.im/...
element-plus的menu菜单，使用for循环遍历无法正常高亮显示，unique-opened不生效的原因
m0_52010962的博客
08-09 989
Vue3使用element-plus组件库的menu以for循环实现菜单栏
vue+element UI导航栏组件多级菜单侧边栏导航封装功能效果
weixin_45852123的博客
09-17 2391
在开发当中会遇到一些组件的封装，侧边栏导航的封装也是很实用的。下面代码拿走直接用！！！ <template> <div> <el-aside width="200px"> <el-menu default-ac
elementui 搭建布局页面路由_Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo...
weixin_39608063的博客
12-18 708
做完这个demo后，我体会到，Vue组件化，webpack, Vue-router等，并不是很难学习，你需要的只是拿起斧头的勇气在做demo的过程中，我遇到一个问题，就是vue-router懒加载一直实现不了，纠结了半天。后来回到原点，去vue-route官网看文档，发现是因为syntax-dynamic-import插件没有安装。所以说：你以为的bug, 实际上是你没看透文档初次学习这个教程，你...
element-ui NavMenu 导航菜单，默认显示多级菜单的第一个页面
jmymy0的博客
06-03 6300
html <el-menu :unique-opened="true" :router="true" background-color="#f6f6f7" text-color="#000" :default-active="routerPath" @open="handleOpen" :default-openeds='defaultOpenedsArray' > <div v-for="(item,taskIndex
element ui 使用导航unique-opened问题
qq_44776709的博客
01-18 2192
改为 前面要加上冒号！！！ 加上冒号后不报错了，但是点一个所有栏目会全部展开 父级栏目也要有对应的index
实现侧边栏菜单（sidebar-item）中每次只打开一个子菜单项，并且当一个新的子菜单项被打开时，其他已经打开的菜单项自动关闭
m0_67352892的博客
11-15 507
设置 :unique-opened=“true”可以控制菜单侧边栏显示，是否只显示一个子菜单。vue+elementUI中 menu。unique-opened属性。
前后端分离——element ui问题记录
Beam
10-30 3644
一、菜单路由跳转 要实现路由跳转，先要在el-menu标签上添加router属性。 然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 当然也可以在每个el-menu-item标签内的router属性设置一下url即可实现点击跳转切优先级较index高。 二、是否只保持一个子菜单的展开配置时报错 配置：<el-...
【element-plus】中菜单栏（el-menu）常用
qq_44971635的博客
12-02 5624
elment-plus中el-menu常用的使用
vue项目-element UI-NavMenu 导航菜单始终只展开一个
weixin_44867717的博客
09-21 5582
vue项目-element UI-NavMenu 导航菜单始终只展开一个 全局搜索:unique-opened找到该配置将其改成true unique-opened：是否只保持一个子菜单的展开 <template> <div class="container"> <el-menu default-active="2" class="el-menu-vertical-demo" :unique-opened="true"
2021-04-14
weixin_44015855的博客
04-14 444
unique-opened属性 ——element-ui 菜单栏优化问题，使用该属性可以只允许展开一个菜单栏，其他默认关闭 在标签中添加该属性即可 添加unique-opened属性前，允许同时展开多个菜单栏 添加unique-opened属性后，只允许展开一个菜单栏 ...
element-ui菜单el-menu的使用
热门推荐
m0_63040701的博客
05-28 1万+
el-menu详解。
element-ui侧边栏点击事件
03-28
在Element-UI中，侧边栏的点击事件可以通过使用路由来实现。当侧边栏的某个菜单项被点击时，可以通过路由跳转到相应的页面或执行相应的操作。 首先，你需要在侧边栏组件中定义菜单项，并为每个菜单项添加点击事件。例如： ```html <template> <div> <el-menu> <el-menu-item @click="handleClick('home')">首页</el-menu-item> <el-menu-item @click="handleClick('about')">关于</el-menu-item> <el-menu-item @click="handleClick('contact')">联系我们</el-menu-item> </el-menu> </div> </template> ``` 然后，在组件的methods中定义点击事件的处理函数。这个处理函数可以根据点击的菜单项的标识来执行相应的操作，比如跳转到对应的路由页面。 ```javascript <script> export default { methods: { handleClick(menuItem) { if (menuItem === 'home') { // 执行跳转到首页的操作 this.$router.push('/home'); } else if (menuItem === 'about') { // 执行跳转到关于页面的操作 this.$router.push('/about'); } else if (menuItem === 'contact') { // 执行跳转到联系我们页面的操作 this.$router.push('/contact'); } } } } </script> ``` 这样，当侧边栏的菜单项被点击时，会触发相应的点击事件处理函数，根据菜单项的标识来执行相应的操作。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值