element通过循环树状变量生成el-menu,并根据数据的children判断是el-submenu还是el-menu-item,未知子级级数时如何循环
时间: 2024-10-27 18:02:26 浏览: 17
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
在Vue.js中,你可以使用递归组件(Recursive Component)的方式来实现这种树状结构的菜单生成。假设你有一个`MenuItem`组件,它有`isSubmenu`属性来表示当前节点是否为子菜单,以及一个数组`children`存储其子项:
```html
<template>
<el-menu
v-for="(item, index) in items"
:key="index"
:default-active="$route.path === item.path ? item.path : null"
:open-recursive="item.children && item.children.length > 0"
>
<template #default="{ item }">
<el-menu-item :index="item.path" :key="item.id">
{{ item.label }}
<span v-if="item.isSubmenu">-</span>
</el-menu-item>
<!-- 如果是子菜单,递归渲染 -->
<el-submenu v-if="item.isSubmenu" :index="item.path + '-submenu'">
<template slot="title">{{ item.label }}</template>
<menu-recursive :items="item.children" />
</el-submenu>
</template>
</el-menu>
</template>
<script>
export default {
components: {
menuRecursive: MenuItem,
},
props: {
items: { type: Array, required: true },
},
};
</script>
```
在这个例子中,`menu-recursive`组件会接收`items`作为props,然后递归地渲染菜单。`v-if="item.isSubmenu"`用于判断当前节点是否为子菜单,如果是,则显示`<el-submenu>`并继续递归。
处理未知子级级数的情况,主要是通过递归调用,当`item.children.length > 0`时,就会一直向下渲染直到所有子项都被包含进来。如果没有指定具体的子级数量,递归将在每个层级终止,直到遇到没有子项的节点。
阅读全文