使用递归生成el-menu子菜单报错“Maximum call stack size exceeded”处理

element-ui使用el-menu垂直菜单导航栏折叠后hover鼠标经过时会报“Maximum call stack size exceeded”错误的解决方案

侧边导航栏收起时,鼠标经过会报错“Maximum call stack size exceeded”,让我感到十分的疑惑,看了网上很多资料,包括升级了element-ui版本和热更新冲突等都没得到解决。

这种情况只有在有二级菜单的情况下,鼠标移动会循环报错,而一级菜单经过时则不会,接下来让我来给大家避避坑吧!

困扰了我两天终于得到啦解决,不过这种方法收搜的时候有一点点卡顿,收缩动画跟文字不同步,要是有更好的办法可以提出来呀~

尝试办法一:新建一个新分支,把element ui @2.13.0版本升级为@2.13.2,然后在<el-submenu>加:popper-append-to-body="true";尝试后发现还是会报错

尝试方法二:在<el-submenu>最外层加个<div>包住整个子组件!结果成功啦!!让我们一起往下看吧~

页面上结构:把<el-submenu>封装成了子组件,左边是父组件,右边是子组件。

此时还没结束,此时收缩后,报错是已经没有了,但是收缩的文字还在!需要继续用CSS处理一下。

处理方法就是在子组件(抓重点!也就是放置<el-submenu>的页面,放在父组件是实现不了的)加个一级文字隐藏和二级文字和箭头隐藏就好啦,利用收缩时collapse来实现,看图啦~

扫描二维码关注公众号,回复: 12364928 查看本文章

这样子就可以解决报错啦~

大家可以参考一下,具体的位置更改还需根据个人项目而定。

不过有点卡顿的现象出现,目前还没有更好的办法解决,有解决办法的码农可以评论区讨论一下噢!

猜你喜欢

转载自blog.csdn.net/XinY__Liu/article/details/113243402