Use recursion to generate el-menu sub-menu and report error "Maximum call stack size exceeded" handling

Element-ui will report "Maximum call stack size exceeded" error solution when hover mouse passes by using the el-menu vertical menu navigation bar to collapse

When the side navigation bar is retracted, the mouse will report an error "Maximum call stack size exceeded" , which makes me feel very confused. I read a lot of information on the Internet, including the upgraded element-ui version and hot update conflicts, etc., which have not been resolved.

In this case, only when there is a second-level menu, the mouse movement will report errors in cycles, but not when the first-level menu passes. Let me avoid the pits for everyone!

It troubled me for two days and finally got the solution, but there was a little bit of lag when searching in this method, and the shrinking animation was not synchronized with the text. If there is a better way, I can put it forward~

Try method 1: Create a new branch, upgrade the element ui @2.13.0 version to @2.13.2, and then add: popper-append-to-body="true" in <el-submenu>; after trying it, I still find Report an error .

Try method two: add a <div> to the outermost layer of <el-submenu> to wrap the entire sub-component! The result is a success! ! Let us look down together~

Structure on the page: Encapsulate <el-submenu> into sub-components, with parent components on the left and sub-components on the right.

It is not over yet. After shrinking, the error report is gone, but the shrinking text is still there! Need to continue processing with CSS.

The processing method is to add a first-level text hiding and a second-level text and arrow hiding in the sub-component (grasp the key point! That is, the page where the <el-submenu> is placed, which cannot be realized in the parent component). Just use the shrinking To achieve collapse, look at the picture~

This way, the error can be resolved~

You can refer to it, and the specific location changes need to be determined according to personal projects.

However, there is a bit of lag, and there is no better way to solve it. Code farmers who have a solution can discuss it in the comment section!

Guess you like

Origin blog.csdn.net/XinY__Liu/article/details/113243402