element-UI中NavMenu导航菜单默认打开问题

最新推荐文章于 2024-05-23 08:53:39 发布
最新推荐文章于 2024-05-23 08:53:39 发布
阅读量1.2w 收藏 5
点赞数 6
分类专栏： vue Element UI 文章标签： vue.js element-UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miao_yf/article/details/105285438
版权

最近写一个网站导航栏，需求要每页打开时，默认导航栏的第一项展开，导航栏我用的是element-UI框架中的NavMenu，我看到以下两个参数，我就写上了

<el-menu default-active="1" default-openeds='["1-1"]'>
    ....
<el-menu>

 结果呢，确实每页导航栏的第一项都默认打开了，但是问题又出现了，导航栏一直保持打开状态，点击其它项没有反应，打不开，第一项也关不上，然后我就到处搜索，最后找到了解决方法

<el-menu :default-openeds='["0"]'>
    ....
<el-menu>

就是这么简单，这个default-opends的值是el-submenu内的index属性值，你想默认打开谁，就写谁

仗剑东游的猫
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
elementui NavMenu导航菜单默认展开
qq_32209081的博客
10-30 6609
近期项目用vue+element ui 做了一个新的后台管理系统 用到了菜单模块， 功能需要他刷新返回自动展开原本的导航列表，经过网上搜索发现 现有网上的博客都不能实现（可能是我自己的原因）,经过摸索发现，默认展开导航需要两个关键属性default-openeds和default-active，官网上解释的 当前激活菜单的 index 和 当前打开的 sub-menu 的 index 的数组，多的不哔哔了 上代码看就懂了 :default-openeds="defalut"中的defalut指的是['1
element UI 导航栏根据路径来确定默认选中
weixin_30376323的博客
06-28 853
1 <template> 2 <el-menu :default-active="activedMenu($route.path)" class="el-menu-vertical-demo padding-top-10" @open="handleopen" @close="handleclose" @select="handleselect" 3 ...
element ui element菜单默认不展开，踩坑
最新发布
weixin_44098452的博客
05-23 248
element ui 2.15版本 的菜单给了官方例子 ，是会默认展开的，如下图1 图2图1图2研究了半天发现，为什么我用接口的数据 自己循环出来的不能默认展开呢，下面是部分代码图3图3我的需求大致就是左侧一个二级的级联数据，右边的是表格，进来页面需要默认左侧选择第一个去过滤表格数据------------上面的大致描述问题。
element默认展开所有菜单
li_mingc的博客
02-03 1万+
``@TOC element默认展开所有菜单 展开菜单用到要在el-menu标签中添加 :default-openeds=“openeds” ， openeds是默认展开菜单的el-submenu的index属性的值的集合，是一个数组。 要展开所有一级菜单的话，openeds里就存放所有一级菜单的index。我这里下标用的是路由，所以openeds是这样的。 // 默认展开菜单的下标 openeds: ['/index', '/myMandate', '/commmonFunction'], 如果
[3.13踩坑] from表单中的button按钮；el-menu中的:default-openeds
qq_54818343的博客
03-13 733
如果在from表单中使用button按钮，默认的type属性是 "submit"，而不是 "button"。这可能导致在某些情况下触发了表单的默认提交行为，而不是你期望的按钮点击事件。解决方法：1.设置type值type="button"2.使用组件库button，如
使用Element UI导航菜单默认展开子菜单
qq_51196135的博客
12-27 7099
⚠️这里 index的属性值由中定义，将想要展开的菜单目录的index值写在数组openeds即可。2、openeds 是默认展开菜单的 的index属性的值的集合，是一个数组。4、index最终值（onlyOneChild.path）实现效果：登陆项目即自定义展开菜单均展开显示！1.需要给 添加属性。
el-menu内层级的默认展开和取值
zhaohr0225的博客
12-07 1767
el-menu内层级的默认展开和取值。
vue+elementui+el-menu，嵌套el-submenu，default-openeds展开子级submenu展开无效
real_xiaobai的博客
09-17 3154
需求：点击A页面的li跳转并展开B页面菜单的二级submenu，点击ul下的“更多”跳转到对应ul的分类标题的B页面一级菜单下 一、A页面 <ul style="list-style-type: cjk-ideographic; overflow-y: hidden;"> {volist name="vo.list" id="vo2"} <li @click="jumpUrl('organ{$vo.organ_id}','{$vo2.id}')">
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
element-ui 实现响应式导航栏的示例代码
10-15
在本文中，我们将深入探讨如何使用Element UI框架实现响应式导航栏。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI元素，用于快速构建美观的前端界面。然而，它默认并不提供传统的顶部导航栏组件，因此...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
element-ui 设置菜单栏展开的方法
01-21
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose theme=dark default-openeds=openeds> openeds需要在data里面定义一下 openeds是一个数组（当前打开的sub-menu的 key 数组） data () { retur
NavMenu-template：导航菜单非常流畅，即会根据设备的屏幕宽度更改其形状
02-15
在IT领域，尤其是在Web开发中，创建响应式和流畅的导航菜单是至关重要的。"NavMenu-template"项目正是一款专注于实现这一目标的解决方案。标题提到的“导航菜单非常流畅，即会根据设备的屏幕宽度更改其形状”，这指...
Element UI元件库.zip
06-03
3. **布局组件**：栅格系统（Grid）、卡片（Card）、折叠面板（Collapse）、导航菜单（NavMenu）、步骤条（Steps）等，帮助设计师构建页面结构和导航。 4. **数据展示**：表格（Table）、标签页（Tabs）、分页...
element-ui侧边栏实现路由跳转：重点是:default-active和router才能正常跳转&默认展开侧边栏:default-openeds
南北极之间
05-21 2万+
关键代码： 在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router------或者router=true 这是一个侧边栏： <el-menu :default-active="this.$route.path" router> <el-submenu index="2"> .
element-ui中导航菜单默认激活子菜单的第一项
认定的总要想办法去完成。
12-13 1万+
默认激活子菜单的第一项  代码部分: <!-- 设置默认选中的选项为1-0 --> <el-menu class="el-menu-vertical-demo" background-color="#eef1f7" text-color="#6c6f72" active-text-color="#ffd04b" unique-opened default-activ
element-ui 导航菜单（NavMenu ） 默认展开所有菜单及注意事项
热门推荐
会飞的咕咕鱼的博客
12-20 2万+
1.需要给el-menu 添加属性 :default-openeds="openeds" ， openeds是默认展开菜单的el-submenu的index属性的值的集合，是一个数组。 2.一般我们再项目中菜单项都是动态获取的，所以我们在向openeds中动态添加index值时，一定要注意：数组中不能出现重复值(如 ['0','1','2','0','3','4']),这样虽然也会展开指定菜...
element-ui NavMenu 导航菜单，默认显示多级菜单的第一个页面
jmymy0的博客
06-03 6242
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
antd defaultOpenKeys设置无效
aGreetSmile的博客
01-16 3760
ant.design文档 原因：当设置openKeys后，defaultOpenKeys失效
element ui如何修改NavMenu 导航菜单里面sidebar-item
06-06
要修改 `NavMenu` 导航菜单里面 `sidebar-item`，需要按照以下步骤进行： 1. 在 `NavMenu` 中找到需要修改的 `sidebar-item`，确定其 `name` 属性。 2. 在你的代码中引入 `NavMenu` 组件。 3. 使用 `$refs` 获取 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值