官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
<script>function $(v){return document.getElementById(v)}
var x=0
function c(y){
$("a"+x).style.display = "none"
$("a"+y).style.display = ""
x=y
}
</script>
<a href="javascript:" onclick="c(0)">菜单一</a>
<a href="javascript:" onclick="c(1)">菜单二</a>
<div id="a0">这里是文字</div>
<div id="a1" style="display:none">这里是图片，自己写上<img src="图片地址"></div>
左侧右侧布局我没给你写，只写了图片、文字切换功能。
1：需要获取左侧导航栏对象。2：绑定事件
3：css中的显示隐藏有：
3.1：display:block显示
3.2：display:none隐藏
3.3：opacity：1；显示
3.4：opacity:：0；隐藏，但元素不会彻底消失只是透明度为0,还是会占据空间。会触发事件。
3.5：visibility:visible显示
3.6：visibility:hidden隐藏，元素不会彻底消失。还会占据空间。
3.7：css3中有transform:scale(1)显示。2D缩放转换
3.8：transform:scale(0)隐藏，2D缩放转换
4：对以上回答如有疑问请指正或者追问。
5：望采纳！
