el-menu侧边栏可收起
时间: 2023-06-30 19:25:12 浏览: 171
是的,Element UI中的`el-menu`组件可以实现侧边栏的收起功能。我们可以通过修改`collapse`属性来实现侧边栏的展开和收起。
下面是一个简单的例子:
```vue
<template>
<div>
<el-menu :collapse="isCollapse">
<el-menu-item index="1">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
<div>
<el-button @click="toggleCollapse" type="primary">
{{ isCollapse ? '展开' : '收起' }}
</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: false
};
},
methods: {
toggleCollapse() {
this.isCollapse = !this.isCollapse;
}
}
};
</script>
```
在这个例子中,我们使用了一个`isCollapse`变量来控制侧边栏的展开和收起状态。当点击按钮时,我们会调用`toggleCollapse`方法来切换`isCollapse`变量的值。同时,我们还使用了`el-menu`组件的`collapse`属性来控制侧边栏的展开和收起。当`collapse`属性为`true`时,侧边栏会收起,反之则展开。
阅读全文