element ui 左侧导航，递归并且支持展开收起

Element UI 提供了一个强大的导航组件 `el-menu`，它非常适合左侧导航栏的设计，并且内置了递归功能，可以方便地处理树状结构的数据，比如菜单层级嵌套。要实现递归并支持展开收起的功能，你可以按照以下步骤配置： 1. 安装 Element UI 的 Menu 组件： ```bash npm install element-ui el-scrollbar ``` 2. 使用 Vue.js 配置递归菜单： ```html <template> <div> <el-menu :default-active="activeIndex" class="el-menu-demo"> <el-submenu v-for="(item, index) in menuList" :key="index" :index="item.path"> <template slot="title">{{ item.name }}</template> <el-menu-item v-if="!item.children" @click="handleClick(item)"> {{ item.name }} </el-menu-item> <el-submenu v-if="item.children" :index="item.path + '/' + $index"> <template slot="title"> <i class="el-icon-folder"></i> {{ item.name }} </template> <el-menu-item-group title="{{ item.title }}"> <el-menu-item v-for="child in item.children" :index="child.path" @click="handleClick(child)"> {{ child.name }} </el-menu-item> </el-menu-item-group> </el-submenu> </el-submenu> </el-menu> </div> </template> <script> import { ElMenu, ElSubmenu, ElMenuItem, ElMenuGroup } from 'element-plus'; export default { components: { ElMenu, ElSubmenu, ElMenuItem, ElMenuGroup }, data() { return { activeIndex: '', // 当前选中项的路径 menuList: [ // 样本数据 { name: '一级目录一', children: [{ name: '二级目录一' }] }, { name: '一级目录二', children: [{ name: '二级目录二' }, { name: '二级目录三', children: [{ name: '三级目录' }] }] } ] }; }, methods: { handleClick(item) { this.activeIndex = item.path; // 更新选中项 } } }; </script> <style scoped> .el-menu .el-menu-item.is-active { background-color: #FAFCFF; } </style> ``` 在这个例子中，`menuList` 存储了菜单的层次结构，当点击一个菜单项时，会更新 `activeIndex` 来跟踪当前选中的节点。