Element: [Bug Report] NavMenu 2.11.1, 2.12.0 uses recursive generation menus to report an overrun of the maximum stack

Created on 10 Sep 2019  ·  23Comments  ·  Source: ElemeFE/element

Element UI version

2.12.0

OS/Browsers version

win10 / chrome76.0.3809.132

Vue version

2.6.10

Reproduction Link

https://github.com/ekesaitin/vue-admin-template/tree/master/src/components/ff-menu

Steps to reproduce

自己封装了一个递归生成菜单的组件， 导航菜单mode设为horizontal 时，2.11.1及2.12.0版本，如果当前菜单有子菜单，鼠标滑过菜单展开和收起会报错。但是vertical模式以及2.11.1之前的版本没有问题

What is Expected?

没有报错

What is actually happening?

控制台报错Uncaught RangeError: Maximum call stack size exceeded.

picture ekesaitin
😕1

Most helpful comment

1.估计设置popper-append-to-body为false对于大多数深度整合element-ui的项目没有效果，在解决堆栈溢出报错的同时，submenu会因为一些整合样式而不显示或者错位

2.参考了上述加div的办法，得出以下针对我的项目的fix，便于大家参考

原组件结构：

<template>
  <el-submenu ...
    ...
  </el-submenu>
</template>

修改后：

<template>
  <div class="el-submenu">
    <el-submenu ...
      ...
    </el-submenu>
  </div>
</template>
<style>
.el-menu--collapse > div > .el-submenu > .el-submenu__title span,
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>
picture charles2hang on 13 Dec 2019
👍6 😄2

All 23 comments

Translation of this issue:

Element UI version

2.12.0

OS/Browsers version

Win10 / Chrome 76.0.3809.132

Vue version

2.6.10

Reproduction Link

Https://github.com/ekesaitin/vue-admin-template

Steps to reproduce

When the navigation menu model is set to horizontal, version 2.11.1 and version 2.12.0 encapsulate a component of recursive menu generation. If the current menu has a submenu, the mouse will make an error when it slides over the menu to expand and close. But vertical mode and previous versions of 2.11.1 are all right.

What is Expected?

No error reported

What is actually happening?

Uncaught RangeError: Maximum call stack size exceeded.

element-bot picture element-bot on 10 Sep 2019

有没有官方的人来回复下啊， 这问题已经持续两个版本了

ekesaitin picture ekesaitin on 17 Sep 2019

17133

a631807682 picture a631807682 on 18 Sep 2019

@ekesaitin 老哥 你这个问题解决了吗 我也是相同的问题啊

863062879 picture 863062879 on 20 Sep 2019

@ekesaitin 老哥 你这个问题解决了吗 我也是相同的问题啊

没 你看看楼上的回复应该是已经提交了修复吧，我没怎么看懂
我暂时把触发方式改成click就没这问题了

ekesaitin picture ekesaitin on 20 Sep 2019

@ekesaitin 我好像解决了 就是方法不太好

863062879 picture 863062879 on 20 Sep 2019

@ekesaitin 我好像解决了 就是方法不太好

怎么解决的 我连render都试过了 贼蛋疼

ekesaitin picture ekesaitin on 20 Sep 2019

给抽出来的组件加一个div根元素 就没有这个问题了 但是又会出来一个bug（菜单折叠后菜单文字不隐藏） 继续解决 加一行括号中的css就可以了（.el-menu--collapse>div>.el-submenu>.el-submenu__title span,
.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
display: none;
}）

863062879 picture 863062879 on 20 Sep 2019
👍1

@ekesaitin

863062879 picture 863062879 on 20 Sep 2019

@ekesaitin 但是在浏览器去看HTML结构 就会发现结构成ul>div>li的结构了 不是正常的ul>li了 但是功能显示都没问题了

863062879 picture 863062879 on 20 Sep 2019

@ekesaitin 但是在浏览器去看HTML结构 就会发现结构成ul>div>li的结构了 不是正常的ul>li了 但是功能显示都没问题了

谢了 我回去试一下

ekesaitin picture ekesaitin on 20 Sep 2019

@ekesaitin 如果只是想先解决堆栈溢出的报错可以吧submenu的popper-appned-to-body属性设置为false。

PengSama picture PengSama on 21 Sep 2019
👍3

@ekesaitin 如果只是想先解决堆栈溢出的报错可以吧submenu的popper-appned-to-body属性设置为false。

谢谢大佬， 完美解决

ekesaitin picture ekesaitin on 21 Sep 2019

@ekesaitin 如果只是想先解决堆栈溢出的报错可以吧submenu的popper-appned-to-body属性设置为false。

which version of element do you use ? i use v-2.12.0, but not work

2.12.0,This method doesn't work in my other project, the menu doesn't show, Now I've solved this problem with vue-fragment

ekesaitin picture ekesaitin on 15 Oct 2019

@ekesaitin 如果只是想先解决堆栈溢出的报错可以吧submenu的popper-appned-to-body属性设置为false。

nice, but incorrect spelling， the correct is popper-append-to-body="false" , not popper-appned...

ahmu001 picture ahmu001 on 15 Oct 2019
👍1

设置false应该没用，我猜的没错的话给你提出去的组件的外面加一个div就可以了，上面的那个老哥已经说过了，我试了半天才修好hhh

xiuxiuyifan picture xiuxiuyifan on 26 Nov 2019

用渲染函数做递归生成就不会报错了 elw-menu.vue

kentalee picture kentalee on 5 Dec 2019

1.估计设置popper-append-to-body为false对于大多数深度整合element-ui的项目没有效果，在解决堆栈溢出报错的同时，submenu会因为一些整合样式而不显示或者错位

2.参考了上述加div的办法，得出以下针对我的项目的fix，便于大家参考

原组件结构：

<template>
  <el-submenu ...
    ...
  </el-submenu>
</template>

修改后：

<template>
  <div class="el-submenu">
    <el-submenu ...
      ...
    </el-submenu>
  </div>
</template>
<style>
.el-menu--collapse > div > .el-submenu > .el-submenu__title span,
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>
charles2hang picture charles2hang on 13 Dec 2019
👍6 😄2

1.估计设置popper-append-to-body为false对于大多数深度整合element-ui的项目没有效果，在解决堆栈溢出报错的同时，submenu会因为一些整合样式而不显示或者错位

2.参考了上述加div的办法，得出以下针对我的项目的fix，便于大家参考

原组件结构：

<template>
  <el-submenu ...
    ...
  </el-submenu>
</template>

修改后：

<template>
  <div class="el-submenu">
    <el-submenu ...
      ...
    </el-submenu>
  </div>
</template>
<style>
.el-menu--collapse > div > .el-submenu > .el-submenu__title span,
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>

感谢大佬！

uchiyo picture uchiyo on 24 Dec 2019
👍2

same 2.13.0

jiankafei picture jiankafei on 17 Jan 2020

1.估计设置popper-append-to-body为false对于大多数深度整合element-ui的项目没有效果，在解决堆栈溢出报错的同时，submenu会因为一些整合样式而不显示或者错位

2.参考了上述加div的办法，得出以下针对我的项目的fix，便于大家参考

原组件结构：

<template>
  <el-submenu ...
    ...
  </el-submenu>
</template>

修改后：

<template>
  <div class="el-submenu">
    <el-submenu ...
      ...
    </el-submenu>
  </div>
</template>
<style>
.el-menu--collapse > div > .el-submenu > .el-submenu__title span,
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>

很久以前遇到堆栈溢出问题，此问题存在很久了，新版本依旧没解决，popper-appned-to-body设置为false虽然解决了 但是定位出现了问题；你这个方法堪称完美！

liliangabc picture liliangabc on 2 May 2020

1.估计设置popper-append-to-body为false对于大多数深度整合element-ui的项目没有效果，在解决堆栈溢出报错的同时，submenu会因为一些整合样式而不显示或者错位
2.参考了上述加div的办法，得出以下针对我的项目的fix，便于大家参考
原组件结构：

<template>
  <el-submenu ...
    ...
  </el-submenu>
</template>

修改后：

<template>
  <div class="el-submenu">
    <el-submenu ...
      ...
    </el-submenu>
  </div>
</template>
<style>
.el-menu--collapse > div > .el-submenu > .el-submenu__title span,
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>

很久以前遇到堆栈溢出问题，此问题存在很久了，新版本依旧没解决，popper-appned-to-body设置为false虽然解决了 但是定位出现了问题；你这个方法堪称完美！

这种情况 不带子菜单的菜单 需要怎么解决

garbage-rubbish picture garbage-rubbish on 11 May 2020

出问题代码
SideBarMenu/index.vue代码：

<template>
    <el-menu
        :collapse="closedSideBar"
        background-color=""
        text-color=""
        active-text-color=""
        :default-active="'/home'"
        router
    >
        <side-bar-menu-item
            v-for="(routeItem, index) in routeList"
            :key="index"
            :route-item="routeItem"
        ></side-bar-menu-item>
    </el-menu>
</template>

<script>
import SideBarMenuItem from "./components/SideBarMenuItem";
import mixins from "../mixins";
export default {
    name: "SideBarMenu",
    mixins: [mixins],
    components: {
        SideBarMenuItem,
    },
    data() {
        return {
            routeList: [
                { path: "/home", title: "路由1" },
                {
                    path: "2",
                    title: "路由2",
                    children: [
                        { path: "/about", title: "路由2-1" },
                        {
                            path: "2-2",
                            title: "路由2-2",
                            children: [{ path: "2-2-1", title: "路由2-2-1" }],
                        },
                    ],
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.el-menu {
    border: none;
}
</style>

SideBarMenu/components/SideBarMenuItem/index.vue代码：

<template>
    <el-submenu v-if="routeItem.children && routeItem.children.length" :index="routeItem.path">
        <template #title>
            <i class="el-icon-menu"></i>
            <span>{{ routeItem.title }}</span>
        </template>
        <side-bar-menu-item
            v-for="(item, index) in routeItem.children"
            :key="index"
            :route-item="item"
        ></side-bar-menu-item>
    </el-submenu>
    <el-menu-item v-else :index="routeItem.path">
        <i class="el-icon-menu"></i>
        <template #title>
            <span>{{ routeItem.title }}</span>
        </template>
    </el-menu-item>
</template>

<script>
export default {
    name: "SideBarMenuItem",
    props: {
        routeItem: {
            type: Object,
        },
    },
};
</script>

解决方案：
直接使用渲染函数渲染本问题可以完美解决

import Vue from "vue";
import mixins from "../mixins";

const createSideBarMenuItem = (createElement, routeList) => {
    return routeList.map((routeItem) => {
        if (routeItem.children && routeItem.children.length) {
            return createElement(
                "el-submenu",
                {
                    props: {
                        index: routeItem.path,
                    },
                },
                [
                    createElement(
                        "template",
                        {
                            slot: "title",
                        },
                        [
                            createElement("i", {
                                class: "el-icon-menu",
                            }),
                            createElement("span", {
                                domProps: {
                                    innerHTML: routeItem.title,
                                },
                            }),
                        ]
                    ),
                    createSideBarMenuItem(createElement, routeItem.children),
                ]
            );
        } else {
            return createElement(
                "el-menu-item",
                {
                    props: {
                        index: routeItem.path,
                    },
                },
                [
                    createElement("i", {
                        class: "el-icon-menu",
                    }),
                    createElement("span", {
                        slot: "title",
                        domProps: {
                            innerHTML: routeItem.title,
                        },
                    }),
                ]
            );
        }
    });
};

const SideBarMenu = Vue.component("SideBarMenu", {
    render(createElement) {
        return createElement(
            "el-menu",
            {
                style: {
                    border: "none",
                },
                mixins: [mixins],
                props: {
                    router: true,
                    collapse: this.closedSideBar,
                },
            },
            createSideBarMenuItem(createElement, this.routeList)
        );
    },
    props: {
        routeList: {
            type: Array,
            default: () => [
                { path: "/home", title: "路由1" },
                {
                    path: "2",
                    title: "路由2",
                    children: [
                        { path: "/about", title: "路由2-1" },
                        {
                            path: "2-2",
                            title: "路由2-2",
                            children: [{ path: "2-2-1", title: "路由2-2-1" }],
                        },
                    ],
                },
            ],
        },
        closedSideBar: {
            type: Boolean,
            default: true,
        },
    },
});

export default SideBarMenu;
qiuqfang picture qiuqfang on 15 Jan 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Leopoldthecoder picture Leopoldthecoder  ·  101Comments
istobran picture istobran  ·  33Comments
Leopoldthecoder picture Leopoldthecoder  ·  52Comments
Leopoldthecoder picture Leopoldthecoder  ·  38Comments
stevepop picture stevepop  ·  35Comments