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 ...
随机推荐
- tensorflow SavedModelBuilder用法
训练代码: # coding: utf-8 from __future__ import print_function from __future__ import division import t ...
- CentOS下多种方法显示文本行号
一.创建文本文件 ..}| >test.txt cat test.txt 二.多种方法显示行号 方法一:nl命令(注意:空行不显示行号) [root@WT data]# nl test.txt ...
- CefSharp禁止弹出新窗体,在同一窗口打开链接,或者在新Tab页打开链接,并且支持带type="POST" target="_blank"的链接
说明:在同一窗口打开链接,只要稍加改造就可以实现,这里实现的是在新Tab页打开链接,并且支持带type="POST" target="_blank"的链接 gi ...
- 集合框架关于<list接口><map接口>的运用
集合: 集合就是一个容器,他可以存储对象,我们说集合就是一个可变的数组 集合框架特点 1.list和set集合同时实现了collection接口 2.set集合存储唯一,无序的对象. 3.list 存 ...
- CSDN不限积分代下载,知网、万方、sci、IEEE论文代下载,智慧树、超星尔雅刷课
下载内容: 1.CSDN不限积分代下载. 2.知网.万方.sci.IEEE论文代下载. 3.超星尔雅,智慧树刷课. 注:由于本人手抖买一个CSDN会员,想挽回一点损失,所以创立了一个下载群,绝对不是骗 ...
- Nmap参数详解(含扫描参数原理解释)
语法结构:nmap [Scan Type(s)] [Options] {target specification} 端口状态介绍 open:确定端口开放,可达 closed :关闭的端口对于nmap也 ...
- <离散数学>代数系统——群,半群
------运算的定义及性质 设S是一个非空集合,映射f:Sn->S称为S上的一个n元运算.假设“•”是定义在集合S上的一个二元运算.若: ∀x,y∈S,x•y∈S,则称“•”在S上是封闭的. ...
- Selenium 与自动化测试 —— 《Selenium 2 自动化测试实战》读书笔记
背景 最近在弄 appium,然后顺便发现了 Selenium 框架和这本书,恰好这本书也介绍了一些软件测试&自动化测试的理论知识,遂拿过来学习学习.所以本文几乎没有实践内容,大多都是概念和工 ...
- 如果获取ruby的hash的v值?
最近写ruby,用到hash,通过k去获取v值,有时候通过hash["k"]去获取可以获取到,有时候通过又获取不到,感觉一脸懵逼 仔细观察了下ruby的hash,有两种表现形式,所 ...
- SoapUI 之 webService 接口测试 [5]
一.webservice接口实例说明 学习的话,大家可以自行到网上找 一些免费的webservice接口来练手.本文中选择实例为:中国电视节目预告(电视节目表) WEB 服务. Endpoint : ...