el-menu 侧边栏收起时 箭头隐藏
时间: 2023-07-12 16:51:04 浏览: 265
可以通过设置 el-menu 组件的 collapse-transition 属性来实现侧边栏的收起和展开过渡效果,并且可以在 el-menu-item 组件中使用 icon 属性来设置箭头图标。在 el-menu 组件的 collapse-transition 属性中设置过渡效果时,需要同时设置 el-menu-item 组件的 hide-on-collapse 属性为 true,这样在侧边栏收起时,箭头图标会自动隐藏。具体实现代码可以参考以下示例:
```html
<el-menu :collapse-transition="true">
<el-menu-item index="1" :icon="collapsed ? '' : 'el-icon-arrow-right'" :hide-on-collapse="true">
选项1
</el-menu-item>
<el-menu-item index="2" :icon="collapsed ? '' : 'el-icon-arrow-right'" :hide-on-collapse="true">
选项2
</el-menu-item>
<el-menu-item index="3" :icon="collapsed ? '' : 'el-icon-arrow-right'" :hide-on-collapse="true">
选项3
</el-menu-item>
</el-menu>
```
其中,collapsed 是一个布尔类型的变量,表示侧边栏是否收起。在侧边栏收起时,箭头图标会自动隐藏,展开时则会显示。
阅读全文