elementui查询菜单折叠

### 使用 Element-UI` 提供的 `el-menu` 组件及其属性。通过设置 `collapse` 属性控制菜单是否处于折叠状态[^1]。 下面是一个简单的例子展示如何创建一个能够响应折叠操作的菜单： ```html <template> <div class="menu-container"> <!-- collapse 控制菜单是否折叠 --> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group title="分组一"> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> <!-- 切换按钮用于改变 isCollapse 的值从而切换菜单的状态 --> <button @click="toggleMenu">Toggle Menu Collapse</button> </div> </template> <script> export default { name: "SideBar", data() { return { activeIndex: '1', isCollapse: false, }; }, methods: { handleOpen(key, keyPath) { console.log('opened:', key, keyPath); }, handleClose(key, keyPath) { console.log('closed:', key, keyPath); }, toggleMenu() { this.isCollapse = !this.isCollapse; } } }; </script> <style scoped> .menu-container .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; } </style> ``` 在这个实例中，当点击页面上的 “Toggle Menu Collapse” 按钮时会触发 `toggleMenu()` 函数来反转 `isCollapse` 变量的布尔值，进而影响到 `<el-menu>` 上绑定的 `:collapse` 动态属性，最终达到菜单折叠/展开的效果[^2]。 对于动态加载的数据结构，可以通过递归组件的方式处理多级嵌套的情况，并且需要注意的是，在 Vue 中应避免在同一元素上同时使用 `v-for` 和 `v-if`，推荐采用更灵活的方式来构建列表项，比如上面提到过的模板标签 `template` 或者自定义递归组件[^3]。