vue使用elementui的el-menu的折叠菜单collapse

在Vue中使用Element UI的<el-menu>组件时，可以通过设置collapse属性来实现折叠菜单的效果。下面是一个简单的例子，展示了如何使用折叠菜单：

1. 首先确保你已经安装并引入了Element UI。
2. 在你的Vue组件中，使用<el-menu>并设置collapse属性以及:collapse绑定，这样可以根据一个响应式属性来控制菜单的折叠状态。

<template>
  <div>
    <!-- 添加一个按钮来切换菜单的折叠状态 -->
    <el-button @click="collapseMenu = !collapseMenu">切换菜单折叠</el-button>
    
    <!-- 使用el-menu组件，并通过:collapse绑定来设置折叠状态 -->
    <el-menu default-active="1-1" class="el-menu-vertical-demo" :collapse="collapseMenu">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-submenu>
      <!-- 更多的el-submenu和el-menu-item -->
    </el-menu>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 初始化折叠状态为false
      collapseMenu: false
    };
  }
};
</script>

在这个例子中，我们定义了一个名为collapseMenu的数据属性，并通过一个按钮来切换它的布尔值。然后，我们将collapseMenu属性绑定到<el-menu>的:collapse属性上，这样当collapseMenu为true时，菜单折叠，为false时展开。