Element-UI 侧边菜单栏收缩

样式：两端对齐

display: flex;    justify-content: space-between;

在中添加div（i便签没有事件属性）

<div class="toggle-button" @click="toggleCollapse" >

折叠图标

<i class="el-icon-s-fold " style="font-size:20px" ></i>

折叠按钮组（官方文档示例）

<!--按钮-->
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> 
 <el-radio-button :label="false">展开</el-radio-button>  
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>

最右边菜单

<!--用户菜单-->      
<el-dropdown style="text-align:right">       
 <i class="el-icon-setting" style="font-size:15px"></i>        
<el-dropdown-menu slot="dropdown">          
<el-dropdown-item>查看</el-dropdown-item>          
<el-dropdown-item>新增</el-dropdown-item>          
<el-dropdown-item>删除</el-dropdown-item>        
</el-dropdown-menu>         
<span style="font-size:15px;" >王小虎</span>      
</el-dropdown>

<el-container>
<!--页面主题区域-->  
<el-container> 
 <!--侧边栏-->  
<el-aside width="200px">  
<!--侧边栏菜单导航区域-->      
<el-menu     
 :collapse="isCollapse"      
background-color="#545c64"      
text-color="#fff"     
 active-text-color="#ffd04b">      
<!--一级菜单-->      
<el-submenu index="1">       
<!--一级菜单模板-->        
<template slot="title">         
<!--一级菜单图标-->          
<i class="el-icon-location"></i>          
 <!--一级菜单文本-->          
<span>导航一</span>        
</template>        
 <!--二级菜单-->          
<el-menu-item index="1-1">          
<template slot="title">        
 <!--二级菜单图标-->         
 <i class="el-icon-location"></i>           
<!--二级菜单文本-->          
<span>选项一</span>        
</template>          
</el-menu-item>          
<el-menu-item index="1-2">          
<template slot="title">         
<!--二级菜单图标-->          
<i class="el-icon-location"></i>          
 <!--二级菜单文本-->          
<span>选项二</span>       
 </template>          
</el-menu-item>      
</el-submenu>    
</el-menu>  
</el-aside>

<el-main>main</el-main>

js ：设置默认值，点击函数将菜单栏展开默认值取反

<script>  
export default {    
data() {      
return {        isCollapse: false      };    
},   
 methods: {            
// 点击按钮，切换菜单的折叠与展开    
toggleCollapse () {      
this.isCollapse = !this.isCollapse    },    
}  }
</script>

样式

<style>*{  margin: 0;  padding: 0;}.elc{  height: 100%;}  .el-menu-vertical-demo:not(.el-menu--collapse) {    width: 200px;    min-height: 400px;  }  .el-main{    background-color: #eeeeef;  }  .el-header{    padding-top:1% ;    background-color: #d1dfff;    display: flex;    justify-content: space-between;  }</style>