vue element-ui父列表和子列表同时出现时的bug
在项目中遇到这样的问题


当第一个父列表下的子列表选择了1,切换到第二个父列表的时候,也会默认选择1
我最开始是计划通过修改子列表的default-active为-1,结果不行
后来发现出现这个问题的原因是因为子列表循环遍历时index值都一样,从0开始的,在element-ui中,menu-item的index是唯一标识,不能一样
解决办法:子列表循环遍历的时候,设置的index一定要不一样,我的建议是可以进行拼装
<el-menu-item
v-for="(item1,index) in leftChildRows"
:key="item1.id"
:index="computedChildIndex(index)"
class="el-menu-item-child"
style="padding-left: 0"
> computedChildIndex (index) {
return `${this.activeIndex1}_${index}`
},
vue element-ui父列表和子列表同时出现时的bug的更多相关文章
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
随机推荐
- 使用iCamera 测试mt9d111 200w高分辨率摄像头小结
使用iCamera 测试mt9d111 200w高分辨率摄像头小结 先看下产品特性 安装效果 根据前面博客的经验,该摄像头,默认配置即有输出,分辨率为800*600,yuv 于是可以写 如果使用默认配 ...
- FPGA_VIP_V101 视频开发板 深入调试小结
FPGA_VIP_V101 推出已经有半年有余,各项功能例程已移植完毕,主要参考crazybingo例程进行移植和结合开发板设计了几个实例例程 主要包含: 硬件配置: FPGA:EP4CE6E22C8 ...
- HTML 02
form表单 能够获取用户输入(包括输入, 选择和上传文件) 将用户的输入内容全部发送给后端 参数 action 向何处提交 不写, 默认朝当前页面所在地址提交数据 全写路径 (https://www ...
- JMeter之SteppingShape
1.背景 其实是这样的,最近包括以前都有同事问过宝路一个问题:JMeter测试计划中涉及到梯度压测时,整个测试计划执行完毕,聚合报告看的是整体的结果啊!并不能直观看到每个梯度下的吞吐量的值(虽然可以通 ...
- 运用Java调用Kettle Job和Trans(带参数)
1.首先创建一个kettle trans 2.对表输入进行编辑 ${dateNow}为要传入的参数. 3.代码编写 首先需要把包导入 import org.pentaho.di.core.Kettle ...
- 《MySQL数据库》MySQL数据库安装(linux)
1. 下载安装包: 百度网盘:链接: https://pan.baidu.com/s/1toGl8O9gMBpDWn0mHWwFyg 提取码: i51g 官网下载:https://dev.mysql ...
- 使用python实现哈希表、字典、集合
哈希表 哈希表(Hash Table, 又称为散列表),是一种线性表的存储结构.哈希表由一个直接寻址表和一个哈希函数组成.哈希函数h(k)将元素关键字k作为自变量,返回元素的存储下标. 简单哈希函数: ...
- Windows Server 2012操作系统实用技巧
1.在桌面显示“计算机” 方法一:控制面板中输入“桌面图标”搜索之后点击显示下面的“显示或隐藏桌面上的通用图标”: 方法二:WIn+R,在运行框中输入rundll32.exe shell32.dll, ...
- NPM 问题汇总
1. Error: setuid user id does not exist Error: setuid user id does not exist at /usr/local/lib/node_ ...
- 阿里云MVP 第十期全球发布:让天下没有难做的技术
简介: MVPs与阿里云一起探索前路,用技术改变世界! 在云的世界中,从来没有“简单”二字,想成为一个优秀的开发者,也没有“简单”二字,而阿里云MVP就一直是云计算中最为顶尖的专家.现在,阿里云MVP ...