在Vue.js中使用Element UI实现无线级左侧菜单的代码通常涉及到递归组件和数据驱动的设计。Element UI的`el-menu`和`el-submenu`组件是构建这种菜单结构的基础。`el-menu`用于展示一级菜单，而`el-submenu`则用于表示有下级子菜单的选项。
首先，我们需要定义一个菜单数据结构，如给出的示例所示，每个菜单项是一个对象，包含名称（`name`）、标识符（`id`）、图标（`icon`）、链接URL（`url`）以及可能的子菜单（`children`数组）。这个数组可以是空的，表示没有子菜单，或者包含其他菜单项，形成嵌套结构。
实现代码的关键在于递归遍历菜单数据，根据`children`属性来判断当前节点是否还有子菜单。当找到子菜单时，我们会创建一个新的`el-submenu`元素，并设置其`props`属性，如`index`或`index-path`，以便管理菜单的层级。对于没有子菜单的`el-menu-item`，则直接渲染对应的链接或内部组件。
以下是核心代码段：
```html
<template>
<el-menu :default-active="$route.path" class="left-menu">
<el-submenu v-for="(item, index) in menuData" :key="item.id" :index="item.id">
<template slot="title">
<i :class="item.icon"></i> {{ item.name }}
</template>
<el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.id">
<i :class="subItem.icon"></i> {{ subItem.name }}
<router-link :to="subItem.url">{{ subItem.url }}</router-link>
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
menuData: [
// 请求数据接口获取动态数据
// 这里省略了请求部分，你可以用axios或其他库来获取菜单列表
]
};
},
computed: {
// 使用计算属性处理菜单数据，以便在组件加载后更新
filteredMenuData() {
return this.menuData.map(item => {
return item.children ? { ...item, children: this.filterChildren(item.children) } : item;
});
},
// 递归函数，过滤子菜单
filterChildren(children) {
return children.map(child => ({ ...child, children: this.filterChildren(child.children) }));
}
}
};
</script>
```
在这个例子中，`filteredMenuData`计算属性会根据实际数据动态生成有无子菜单的菜单项。递归函数`filterChildren`确保了无论菜单有多深的嵌套，都能正确地渲染到视图中。
通过以上代码，你可以在Vue项目中轻松实现一个动态且无限级别的左侧菜单，只需要确保数据接口能够提供完整的菜单结构即可。
我的内容管理
展开
