在项目中遇到这样的问题

当第一个父列表下的子列表选择了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的更多相关文章

  1. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  2. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  3. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  4. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  5. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  6. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  7. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  8. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  9. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  10. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. 【Feign】@FeignClient相同名字错误 The bean 'xxx.FeignClientSpecification', defined in null, could not be registered

    The bean 'xxx.FeignClientSpecification', defined in null, could not be registered. A bean with that ...

  2. Java中Object类常用的12个方法,你用过几个?

    前言 Java 中的 Object 方法在面试中是一个非常高频的点,毕竟 Object 是所有类的“老祖宗”.Java 中所有的类都有一个共同的祖先 Object 类,子类都会继承所有 Object ...

  3. Linux sudo用户提权与日志审计

    一.格式说明及常用配置选项 格式: 用户或组 主机=授权可以使用哪个用户的权限 可以执行的命令 User_Alias 用户定义别名(别名可以是用户,用户组(用户组前面要加%))例:User_Alias ...

  4. 基于TCP协议之socket编程

    #服务端 #导入一个socket模块 import socket #想象成买手机打电话:socket.SOCK_STREAM 表示建立tcp连接 ,udp连接socket.SOCK_DGRAM #买了 ...

  5. 《Java基础知识》Java异常处理详解

    1. Java 中的异常 前言:Java 中的异常处理是处理程序运行错误时的强大机制之一,它可以保证应用程序的正常流程. 首先我们将了解java异常.异常的类型以及受查和非受查异常之间的区别. 1.1 ...

  6. LImax服务器框架学习--安装、使用ant工具、生成limax相关代码

    一.安装ant ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.在实际软件开发中,有很多地方可以用到ant. 首先现在一个ant安装压缩包, ...

  7. OA表单制作(致远)

    第一步.导入已经制作好的xnl表单文件. 第二步.对每个字段设置相关属性. 1.设置文本属性,录入类型选择文本框. 2.设置日期属性,录入类型选择日期控件. 3.设置引用类型,录入类型选择关联表单-- ...

  8. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  9. 0基础-scp命令一学就会

    scp -P 22 -r  /home/server Android@192.168.1.110:/opt    将本地/home/server的文件夹上传到远端服务器192.168.1.110的目录 ...

  10. 每天进步一点点----JS之比较运算符易错点

    1.字符串的比较 字符串也是可以比较的,字符串比较的asc码顺序:asc有128位,由7位二进制数表示,每个数对应的是一个字符.ASC码有ASC码1,由7位二进制1数表示:ASC2码又8位二进制数表示 ...