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

最新推荐文章于 2024-05-13 10:00:56 发布
最新推荐文章于 2024-05-13 10:00:56 发布
阅读量3.2k 收藏 4
点赞数 5
分类专栏： vue element-UI 文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stead_Fast/article/details/120216443
版权

问题描述

使用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>
慕宁儿
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+elementui v-for 循环卡片列表
lrbtony的博客
01-08 8645
for循环实现循环卡片样式
element动态菜单和图标
Zt0118的博客
02-10 1512
<el-aside :width="isCollapse ? '64px' : '200px'"> <el-menu :default-openeds="openeds" :defaultOpeneds="['11','12','13']" :router="true" :collapse-transition="false" :collapse="isCollapse" ..
element默认展开所有菜单
li_mingc的博客
02-03 1万+
``@TOC element默认展开所有菜单 展开菜单用到要在el-menu标签中添加 :default-openeds=“openeds” ， openeds是默认展开菜单的el-submenu的index属性的值的集合，是一个数组。 要展开所有一级菜单的话，openeds里就存放所有一级菜单的index。我这里下标用的是路由，所以openeds是这样的。 // 默认展开菜单的下标 openeds: ['/index', '/myMandate', '/commmonFunction'], 如果
展开一个菜单项所有的项都展开问题解决
xiaoxiao1777的博客
05-13 5548
问题情景： 对于标签<el-menu>来说使用v-for循环创建出来，菜单项列表数组有多少项就创建出多少菜单项控件，导致所有的菜单行索引index值都一样，点击展开和关闭一定是根据index来进行定位操作的，所以导致了点击一个，其它都是同样的效果，相当于对所有相同index项进行的操作 解决： 给每一项index绑定不同唯一的值，而数据中每个item都有唯一的id，这个id是后台数据库中给设计好的，所以利用这个id <el-submenu :index="item.id + ''
el-menu 保持展开点击不收缩 默认选择第一个菜单
最新发布
szzlh123456789的博客
05-13 863
【代码】el-menu 保持展开点击不收缩 默认选择第一个菜单。
element-ui的navMenu使用v-for循环渲染不同子标签(el-menu-item和el-submenu)
热门推荐
郑伟斌的博客
03-13 1万+
简单记录1.简介2.上代码功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1.简介 作为一个合格的全栈开发者，前端的常...
el-menu 手风琴模式下永远展开一个菜单不让其关闭
weixin_44733223的博客
09-06 2291
el-menu手风琴模式不让其一级菜单全部关闭,总保持一个展开状态
解决点击element-UI中导航菜单组件的子菜单，所有同级的其他子菜单也会同时展开或折叠的问题
m0_55728090的博客
04-11 9435
问题 这个是渲染到4级的导航菜单，只截取一部分展示。重点不是这个问题，是刚开始点击一个子菜单，其他同级的子菜单也会相应的展开和折叠，那么这种情况为什么会这样呢，明明自己的:index=“”有设置内容了，怎么还会这样呢。 原来的是这样的，我的理解是，如果都把它设置为url，index无法判断，所以每次都同时展开或折叠。 下面是改了之后的，使用后端给的接口中，改为用来区分层级或者是编码的那个字段，这样就可以有区别的情况下，index能正确区分，并且解决这个问题。 代码如下： <!--
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
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
- 在`publish-center.vue`组件中，你看到的`v-for`循环遍历`$router.options.routes`，这是Vue Router中存储所有路由的数组，每个元素代表一个路由配置。 - `v-if`条件判断用于决定是否渲染子菜单或菜单项，这通常...
Vue实现导航栏菜单
10-14
在提供的代码示例中，我们看到一个简单的Vue应用，用于创建一个左侧导航栏菜单，当用户点击菜单项时，右侧内容区域会显示对应的菜单内容。以下是关于这个实现的详细解释： 1. **HTML 结构**： - `...
Vue iview-admin框架二级菜单改为三级菜单的方法
08-27
在这个过程中，我们需要添加一个条件判断，即 isThirdLeveMenu 函数，该函数用于判断是否有三级菜单。如果有三级菜单，则增加三级菜单项。 在实现三级菜单时，我们需要注意以下几点： 1. 我们需要修改 sidebarMenu...
ruoyivue3菜单修改，顶部一、二级，左侧三级，选择二级自动选择左侧第一个三级
04-09
- 在 `v-for` 循环中，使用 `v-bind:class` 绑定一个条件类，当 `selectedSubItem` 与当前三级菜单的索引或标识匹配时，赋予一个特定的高亮样式。 4. **Vue.js 组件通信**： - 如果一级菜单和二级菜单在不同的...
导航菜单
03-20
实现导航菜单的方法多种多样，可以使用HTML、CSS和JavaScript基础技术，也可以借助于前端框架如Bootstrap、Element UI或Vue Element Admin等。这些框架提供了预设的导航组件，只需要简单配置就能创建出美观且功能...
elementui表格动态for循环并对应列添加链接
qq_44997933的博客
02-23 2375
<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项目中令elementUI中的el-menu动态自适应数据
weixin_42966151的博客
11-29 2046
[学习笔记]elementUI中el-menu动态自适应数据
左侧菜单栏的渲染（v-for）
qq_45780380的博客
03-26 514
左侧菜单栏的渲染（v-for） 代码： <el-aside width="200px"> <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <!-- 一级菜单--> <el-submenu :index
侧边栏开发--通过v-for循环渲染列表
wssg1206的博客
09-09 201
首先，通过观察menuList中的数据，我们可以分析出第一层用来渲染一级菜单，第二层的children用于渲染二级菜单。又因为:index中只接受字符串，所以我们需要在item.id后面加上一个空字符串‘’，则满足语法要求。又因为每一个菜单都要有自己唯一的index，所以我们通过item.id作为每个数组的唯一index值。因为我们已经去到了item，且children就在item列表中。在menuList中循环列出item，以item.id为索引值。
elementUI使用v-for创建无限级导航栏—— 递归组件
qq_30351747的博客
05-04 3418
elementUI使用v-for创建无限级导航栏—— 递归组件 直接copy，不需要墨迹 说明： 根据返回的数据动态循环渲染菜单，是否具有子级目录递归创建所有目录并具有复用性，动态绑定相关属性； 解决步骤： 1、使用element组件（具体步骤不在赘述） 2、先创建公共组件 （1）在第一级菜单循环过程中，如判断出当前菜单存在着子级菜单，渲染出当前菜单，并将当前菜单的子级属性（例如：child：[数组]），利用子组件传参的方式，传给我们现在正在封装的组件（俗称：无限套娃）。 递归组件封装 MenuTree.v
element-ui使用v-for循环el-form-item 写一个组件
03-31
以下是一个使用element-ui的v-for循环el-form-item的组件代码示例： ```vue <template> <el-form> <el-form-item v-for="(field, index) in fields" :key="index" :label="field.label"> <el-input v-model="field.value" :placeholder="field.placeholder"></el-input> </el-form-item> </el-form> </template> <script> export default { props: { fields: { type: Array, required: true, default: () => [], }, }, }; </script> ``` 在上述代码中，我们使用了一个props属性来接收一个名为fields的数组，该数组中包含了每个表单项的label、placeholder和value属性。我们使用v-for循环该数组，并将其作为el-form-item的子组件，每个el-form-item包含了一个el-input组件，用于输入表单项的值。最后，我们将整个表单包裹在一个el-form组件中。 使用该组件时，我们只需要传递一个包含所有表单项的数组即可： ```vue <template> <my-form :fields="fields"></my-form> </template> <script> import MyForm from "@/components/MyForm.vue"; export default { components: { MyForm, }, data() { return { fields: [ { label: "姓名", placeholder: "请输入姓名", value: "", }, { label: "邮箱", placeholder: "请输入邮箱", value: "", }, { label: "电话", placeholder: "请输入电话", value: "", }, ], }; }, }; </script> ``` 在上述代码中，我们引入了刚才创建的MyForm组件，并将fields数组传递给该组件的props属性。fields数组中包含了三个表单项，分别是姓名、邮箱和电话。我们可以通过该组件来快速创建包含多个表单项的表单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值