2024年前端最新vue使用iview解决多级菜单如何渲染问题，996页阿里Web前端面试真题解析火爆全网

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

ref=“user”

accordion

width=“auto”

<left-menu-nav

v-if=“items.children&&items.children.length!==0”

:menuList=“items”

:key=“items.name”

<menu-item

v-else

:key=“index”

:name=“items.id”

{{items.name}}

4、接下来我们看看这个组件（）怎么写，主要实现思路跟上面的一样，有子菜单的时候，继续调这个组件，否则，就显示子菜单

{{ menuList.name }}

<left-menu-nav

v-if=“item.children&&item.children.length!==0”

:menuList=“item”

:key=“item.index”

{{item.name}}

5、完整的代码如下

（1）、父组件view

<Sider

ref=“side1”

hide-trigger

collapsible

:collapsed-width=“65”

v-model=“isCollapsed”

:style=“{position: ‘fixed’, height: ‘100vh’, left: 0, overflow: ‘auto’}”

ref=“user”

:class=“menuitemClasses”

:active-name=“$store.state.activeName”

:open-names=“openKeymenu”

accordion

v-show=“!isCollapsed”

theme=“dark”

width=“auto”

<left-menu-nav

v-if=“items.children&&items.children.length!==0”

:menuList=“items”

:key=“items.name”

<menu-item

v-else

:key=“index”

:name=“items.id”

@click.native=“dropMenu(JSON.stringify(items))”

{{items.name}}

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Menu>

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-U8udryKr-1715593972844)]