Vue Element 实现无限级左侧菜单的递归代码示例

在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项目中轻松实现一个动态且无限级别的左侧菜单，只需要确保数据接口能够提供完整的菜单结构即可。