vue使用element组件实现菜单的折叠与展开

1.实现效果

1.未折叠时

2.折叠后

2. 代码

• template

<el-container>
  <!--侧边栏-->
  <!--侧边栏菜单区-->
  <el-aside :width="isCollapse ? '64px' : '200px' ">
    <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409Eff"
      :collapse="isCollapse"	//给Collapse动态赋值
      :collapse-transition="false"
      >
    </el-menu>
  </el-aside>
</el-container>

• script

data(){
    
    
	return{
    
    
	  isCollapse:false,
	}
}
methods:{
    
    
  //点击按钮折叠菜单
  toggleCollapse(){
    
    
    this.isCollapse = !this.isCollapse;	//点击折叠按钮后，对isCollapse进行取反
  }
},

说明

• collapse:element NavMenu 导航菜单组件的一个能让菜单折叠或收起的属性

  • 默认为false，为true时可折叠

• :width="isCollapse ? '64px' : '200px' "表示：如果isCollapse值为false，宽度为200px；若isCollapse值为true，宽度为64px