官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
第一步，在HBuilder工具中已创建好的Web项目，指定目录下新建静态页面buttonClick.html，如下图所示：如何使用Vue.js中的按钮点击事件并获取按钮属性
第二步，在title标签下引入vue.js核心JavaScript文件，注意压缩版本和开发版本，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第三步，在<body></body>标签内，插入一个div和四个button，使用v-on绑定事件，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第四步，在<div></div>标签下方，插入<script></script>标签，并在标签内编写事件函数，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第五步，保存代码并在浏览器中查看结果，点击按钮，查看弹出的结果，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第六步，弹出的结果为undefined，修改代码并在事件中传参数，然后再次查看结果，可以看到按钮的相关属性和方法（浏览器控制台），如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
建议使用ref，给button添加注册ref引用，然后在表单提交的时候，获取button按钮，使其disable置灰。
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。
<div id="app"><button ref="mybutton" type="primary" @click="save">保存</button>
</div> <script>
new Vue({
el: "#app",
data: {
},
methods: {
save() {
this.$refs.mybutton.disabled = true
}
}
})
</script>
<style>
:disabled{
border: 1px solid #DDD
background-color: #F5F5F5
color:#ACA899
}
</style>
