递归生成菜单html,Element-ui NavMenu子菜单使用递归生成时使用报错

当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover时，会出现循环调用某个(mouseenter)事件，导致最后报错

注：2.13.2 版本，只需对子菜单设置属性 :popper-append-to-body="false" 就不会出现这个问题了

报错信息如下：

Uncaught RangeError: Maximum call stack size exceeded.

at VueComponent.handleMouseenter (index.js:1)

at invokeWithErrorHandling (vue.js:1863)

at HTMLLIElement.invoker (vue.js:2188)

at HTMLLIElement.original._wrapper (vue.js:7547)

at VueComponent.handleMouseenter (index.js:1)

at invokeWithErrorHandling (vue.js:1863)

at HTMLLIElement.invoker (vue.js:2188)

at HTMLLIElement.original._wrapper (vue.js:7547)

at VueComponent.handleMouseenter (index.js:1)

at invokeWithErrorHandling (vue.js:1863)

测试代码

版本：

vue: v2.6.11

element-ui: 2.13.0

{{ menu.title }}

错误分析

观察递归生成的导航栏代码及报错代码：

handleMouseenter: function(e) {

var t = this

, i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this.showTimeout;

if ("ActiveXObject"in window || "focus" !== e.type || e.relatedTarget) {

var n = this.rootMenu

, r = this.disabled;

"click" === n.menuTrigger && "horizontal" === n.mode || !n.collapse && "vertical" === n.mode || r || (this.dispatch("ElSubmenu", "mouse-enter-child"),

clearTimeout(this.timeout),

this.timeout = setTimeout(function() {

t.rootMenu.openMenu(t.index, t.indexPath)

}, i),

this.appendToBody && this.$parent.$el.dispatchEvent(new MouseEvent("mouseenter")));//报错代码

}

},

猜测是因为事件冒泡或下沉导致元素重复派发和接受mouseenter事件，造成了类似死循环的状态，因时间关系，没做深究，后面有时间的时候再查下根本原因(如果记得的话…)

处理方式

1.给el-submenu添加一个属性: popper-append-to-body:true

将二级子菜单插入至body，这样做之后需要根据需要添加一些样式

2.给组件最外围添加一个div

这是第一个的尝试，能够使子菜单大致正常使用，但是包裹之后，又需要给div添加display:inline-block，否则样式走样严重，并且这样使用，会出现一级菜单排列顺序异常的问题，当然可以用一些方法处理，比如通过某个值强制确定位置，但是个人认为没必要搞那么麻烦，所以推荐第一种处理方式。