2024年Web前端最新vue使用iview解决多级菜单如何渲染问题(1)，Web前端中高级面试题

最后

资料过多，篇幅有限

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

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

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}}

（2）、父组件的js

import leftMenuNav from “@/components/slidemenu”;

export default {

name: “leftMenu”,

components: {

leftMenuNav

},

}

（3）slidemenu.vue文件代码

{{ menuList.name }}

<left-menu-nav

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

:menuList=“item”

:key=“item.index”

{{item.name}}