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来实现，看图啦~

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

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

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