官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
知道你要啥样的，就说个最简单的竖列折叠菜单吧,比如：
菜单1
子菜单1
子菜单2
……
菜单2
子菜单1
子菜单2
……
如果要做这样的折叠菜单 那html为：
<div class="menu"><div>菜单1</div>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
……
</ul>
</div>
<div class="menu">
<div>菜单1</div>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
……
</ul>
</div>
css为：(没样式只有功能，样式自己去加)
.menu ul{ display:none}js为：
$('.menu').click(function(){$(this).find('ul').slideToggle()
)}
折叠是一种样式的呈现方式，需要用css结合js来实现。细分逻辑，就是子菜单区域的显示和隐藏，html标签中有个设置显示和隐藏的样式属性：display:none/block
通过js触发，来切换这个属性的值即可实现显示和隐藏效果了。
比如：
定义一个显示、隐藏的方法：
//隐藏
function hideSomething( elem ){
if( elem ){
elem.style.display="none"
}
}
//显示
function showSomething( elem ){
if( elem ){
elem.style.display="block"
}
}
如果你没有前端开发基础，可能有些麻烦，还需要学习一些基础内容。
