element通过循环树状变量生成el-menu,并根据树节点数据的children判断是el-submenu还是el-menu-item,无限级如何如何循环
时间: 2024-10-27 07:02:02 浏览: 15
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
在Vue.js中,你可以使用递归函数结合v-for指令来生成元素(比如`el-menu`)并处理嵌套菜单。假设你有一个树形结构的数据,每个节点包含`label`(标签名)、`children`(子菜单数组)等信息,你可以这样做:
```html
<template>
<el-menu :default-active="activeIndex" class="tree-menu">
<el-submenu v-for="(item, index) in menuData" :key="index" :index="item.id">
<template slot="title">{{ item.label }}</template>
<el-menu-item v-if="!item.children"> <!-- 如果没有子菜单 -->
<span>Item {{ item.label }}</span>
</el-menu-item>
<el-menu v-else> <!-- 否则,如果有子菜单 -->
<el-submenu v-for="subItem in item.children" :key="subItem.id">
<template slot="title">{{ subItem.label }}</template>
<el-menu-item>Sub Item {{ subItem.label }}</el-menu-item>
</el-submenu>
</el-menu>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '', // 当前选中的菜单项
menuData: [] // 树状菜单数据
}
},
computed: {
// 根据数据计算生成动态菜单
generatedMenuItems() {
return this.menuData.map(item => {
if (item.children) {
return {
...item,
children: this.generatedMenuItems.map(subItem => ({ ...subItem, parent: item }))
};
} else {
return { ...item, parent: null };
}
});
}
}
}
</script>
```
这个模板会遍历`menuData`数组,对于每个节点,如果没有`children`,它将创建一个`el-menu-item`;如果有`children`,则创建一个`el-submenu`,并继续递归生成其下的子菜单。`parent`字段用于关联子菜单回溯到它们的父菜单。
阅读全文