关于element导航菜单使用for循环出来，展开一个菜单项，其余也都打开的问题

最新推荐文章于 2024-06-20 20:43:52 发布

原创最新推荐文章于 2024-06-20 20:43:52 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

element-UI

3 篇文章

订阅专栏

在使用Element UI的导航菜单时遇到一个问题，当使用v-for循环渲染菜单项时，点击某一项会导致所有菜单项都展开。原因在于菜单项的index相同导致。解决办法是在循环中为每个菜单项设置唯一的index，通常是用ID拼接空字符串转换成字符串。这样每个菜单项就有了自己的唯一标识，避免了展开冲突。

问题描述

使用element导航菜单时，使用v-for循环出来的每一项，打卡一个菜单项时发现其他项也都打开了，是因为<el-menu>标签是根据index来定位展开还是关闭的，而使用v-for循环使得每一项的index都是一样的，所以才会一个打开都打开

解决办法

只需要在循环时，给每一项添加唯一index就可以了，每一项都有自己的唯一id，所以将id作为index，加空字符串是因为index只接受字符串，而id是数字，拼接空字符串可以使数字转为字符串。

<el-submenu v-for="(item,index) in resources" :key="index" :index="item.id + '' "></el-submenu>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

慕宁儿

关注关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element UI自定义弹窗内添加for循环

weixin_48295815的博客

01-19

774

这需要把内容用for循环展示到messagebox里，完成，欢迎各位大佬指教！

关于element ui中引入官方的NavMenu时出现点击某个子菜单时，所有的子菜单全都展开问题

qq_30351747的博客

05-04

3441

问题描述使用官方代码，为项目添加了多级导航菜单。但是，当我点击某个菜单的某一项时发现，不止当前菜单项的子菜单展开了，所有菜单项子菜单全都展开。解决方法这是由子菜单项的index属性引起的，但我们为每个子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决。 ———————————————— 版权声明：本文为优快云博主「苹果砸醒了逃课的牛顿」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https:/

参与评论您还未登录，请先登录后发表或查看评论

解决点击element-UI中导航菜单组件的子菜单，所有同级的其他子菜单也会同时展开或折叠的问题

m0_55728090的博客

04-11

1万+

问题这个是渲染到4级的导航菜单，只截取一部分展示。重点不是这个问题，是刚开始点击一个子菜单，其他同级的子菜单也会相应的展开和折叠，那么这种情况为什么会这样呢，明明自己的:index=“”有设置内容了，怎么还会这样呢。原来的是这样的，我的理解是，如果都把它设置为url，index无法判断，所以每次都同时展开或折叠。下面是改了之后的，使用后端给的接口中，改为用来区分层级或者是编码的那个字段，这样就可以有区别的情况下，index能正确区分，并且解决这个问题。代码如下： <!--

el-menu 保持展开点击不收缩默认选择第一个菜单

szzlh123456789的博客

05-13

3902

【代码】el-menu 保持展开点击不收缩默认选择第一个菜单。

elementui plus 图标循环加载

weixin_44306993的博客

04-01

2306

今天在学习vue3时，在用Element Plus布局页面时，遇到了一个图标循环加载的问题。开始不知道如何渲染图标，以为像ElementUI 一样可以通过class进行渲染图标，发现无法使用，让后我发现引用的图标是组件，组件的话就可以使用进行渲染了. 官方文档中图标的使用方法：  <template> <div> <el-icon :size="size" :color="color"&

element-ui的navMenu使用v-for循环渲染不同子标签(el-menu-item和el-submenu)

热门推荐

郑伟斌的博客

03-13

1万+

简单记录1.简介2.上代码功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1.简介作为一个合格的全栈开发者，前端的常...

elementui el-input，v-for循环、校验、消除校验

weixin_46041322的博客

12-30

8155

第一步；页面 el-input循环 <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <div v-for="(item,index) in ruleForm.mailSet" :key="index"> <el-form-item > <el-input v-model.trim="ruleForm

elementUI：el-menu 对于同一级的节点，每次只能展开一个

qq_41814311的博客

04-02

4848

项目场景：项目需求左侧菜单栏，当选中当前菜单后，需要关闭其他菜单选项。展示效果原因分析：因为 elementUI中 el-menu 标签中 unique-opened属性默认为 false ，表示全展开。解决方案：将 unique-opened 设置为 true <el-menu :default-active="activeMenu" :collapse="isCollapse" :text-color="varia

element-ui使用v-for循环el-form-item。并添加校验

肖肖肖丽珠的博客

01-12

1万+

<el-form ref="dataForm" :model="form" label-position="right" label-width="150px"> <el-form-item label="标签"> <div v-for="(item, index) in form.input" :key="index"> <el-form-item :prop="'input....

Element表单v-for循环校验问题

popping_Sun的博客

06-03

687

开发过程中碰到了这个问题，自己也是搜索了一番，刚开始跟着网上的答案进行了一番操作没有实现，后来在一条答案中发现官方上就有，去ElementUi官网看了一下，跟着官网试了一下，立马实现。以后还是要 ...

Element UI 一键校验多表单（v-for循环表单，异步校验规则，v-for 中的 ref 属性，避坑 forEach 不支持异步 await ）

朝阳39的博客

06-14

1358

所以此例多表单的校验需改用 for 循环，通过 break 还可提前跳出 for 循环。通常，若两个元素 ref 属性相同，通过 this.$refs 只能获取到最终的元素。但在 v-for 中的 ref ，通过 this.$refs 得到的是一个数组。此处的接口是公共的免费接口，仅模拟效果，不必深究传参和返回。forEach 只支持同步，不支持异步。所以，此例中，获取第一个表单的方法是。

elementui表格动态for循环并对应列添加链接

qq_44997933的博客

02-23

2567

<el-table :data="Date" <！-- 表格里面的数据源 --> border stripe > <el-table-column type="selection" width="55" v-if="iCheckbox" ></el-table-column> <el-table-column label="序号" type="index" v-if="iRo

vue element 侧边栏子菜单全部显示

半梅芒果干的博客

04-25

877

参考文档：https://element.eleme.cn/#/zh-CN/component/menu default-openeds：把需要展开的放到数组中

ElementUI Form表单里使用 v-for循环创建表单元素校验

a123456234的博客

06-20

2287

Form表单里的使用 v-for循环创建的表单元素校验

element-ui中for循环或者table遍历select且赋默认值

jokren的博客

04-16

4040

解决:把 v-model 的值加到循环数组中去，为每个 select 设置了单独的 v-model 变量值，对数据提前加工一下直接上代码: <template> <div v-for='(val,index) in data'> <el-select v-model="models[index]" placeholder="请选择"> <el-o...

vue3使用el-menu多级菜单出现点击一个全部展开的问题

m0_46442118的博客

04-07

6097

虽然点击菜单其它的子菜单不会展开了，但是index存的是编号，url存的是路由地址，点击子菜单地址栏显示的是编号信息，不是地址，如图所示。测试时发现单击菜单显示子菜单时其它的菜单也被展开，看了其它文章写的是修改。，发现只有叶子菜单的数据才配置了url,其它级别的则为空数据，所以就导致了配置。注意：后端数据库url和index传的值是唯一的，也不能出现两个空值。:index="menu.url"时出现点击一个全部展开的情况。el-sub-menu中的:index值为menu.index，

Element通过v-for循环渲染的form表单校验

m0_58565372的博客

08-17

2433

3.prop的第一部分为data中该组遍历数据对应的数组名，此例中为form中的'trucksList'；第三部分为form中的'trucksList'中该输入框对应的属性名；需求：有个表单信息是v-for渲染的，例如下图，通过循环遍历实现新增和删除模块，按照平时的写法实现校验，是不能实现我们想要的效果，根据这个需求，我找到了一个解决方法。2.rules为data中rules对象对应属性，如'rules.providerType'；1.循环的数据中，每个el-form-item都写rules、prop。

vue+Element项目中v-for循环+表单验证

TianXuab的博客

07-25

2442

如果在Form 表单里有通过v-for动态生成，如何设置验证呢？

element导航菜单里加搜索框

最新发布

03-13

### 如何在Element UI导航菜单中集成搜索框组件要在Element UI的导航菜单中添加搜索框功能，可以通过自定义`el-menu`组件来实现。以下是具体方法： #### 方法概述通过组合 `el-input` 和 `el-menu` 组件，在导航栏顶部嵌入一个输入框用于过滤菜单项。可以监听输入事件并动态更新显示的菜单列表。 --- #### 实现代码示例以下是一个完整的示例代码片段，展示如何将搜索框与导航菜单结合在一起[^1]: ```html <template> <div class="menu-container">  <el-input v-model="searchText" placeholder="请输入关键字..." prefix-icon="el-icon-search" @input="filterMenuItems"></el-input>  <el-menu :default-active="activeIndex" mode="horizontal"> <template v-for="(item, index) in filteredMenus"> <el-menu-item :key="index" :index="String(index)"> {{ item.label }} </el-menu-item> </template> </el-menu> </div> </template> <script> export default { data() { return { searchText: '', // 输入框绑定的数据模型 activeIndex: '0', menus: [ { label: '首页' }, { label: '产品中心' }, { label: '关于我们' }, { label: '联系我们' } ], filteredMenus: [] // 过滤后的菜单数据 }; }, created() { this.filteredMenus = [...this.menus]; // 初始化未过滤的菜单 }, methods: { filterMenuItems() { const keyword = this.searchText.trim().toLowerCase(); if (!keyword) { this.filteredMenus = [...this.menus]; } else { this.filteredMenus = this.menus.filter(item => item.label.toLowerCase().includes(keyword) ); } } } }; </script> <style scoped> .menu-container .el-input { margin-bottom: 10px; } </style> ``` --- #### 关键点解析 1. **双向绑定** 使用 `v-model` 将输入框的内容绑定到变量 `searchText` 上，并实时获取用户输入的关键字[^3]。 2. **动态过滤逻辑** 定义了一个名为 `filteredMenus` 的数组，用来存储经过筛选后的菜单项。当用户输入内容发生变化时，调用 `filterMenuItems()` 函数重新计算符合条件的菜单条目。 3. **模板渲染优化** 利用了 Vue 的条件渲染特性 (`v-if`) 或者循环遍历机制 (`v-for`) 来控制最终呈现给用户的界面效果[^2]。 4. **样式调整** 可以为搜索框设置额外的空间间隔（如上边距），使其更贴近实际需求中的布局设计。 --- #### 注意事项如果项目规模较大或者需要支持更多复杂交互行为，则建议考虑封装成独立组件以便于维护和复用；另外还需注意性能问题——尤其是在面对海量级子节点的情况下应采取懒加载策略减少初始 DOM 渲染开销。