elementplus menu菜单折叠

在 Element Plus 中，可以使用 el-menu 组件来创建菜单，并且可以通过设置 collapse 属性来实现菜单的折叠功能。下面是一个简单的例子，展示了如何使用 el-menu 和 collapse 属性来创建可折叠的菜单：

<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>导航三</span>
          </template>
          <el-menu-item index="3-1">选项一</el-menu-item>
          <el-menu-item index="3-2">选项二</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="12">
      <el-button @click="collapse = !collapse">切换折叠</el-button>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      collapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log('open', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('close', key, keyPath);
    }
  }
};
</script>
 
<style>
.tac {
  text-align: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo.el-menu--collapse {
  width: 60px;
}
</style>

在这个例子中，我们使用了 collapse 数据属性来控制菜单的折叠状态。通过点击按钮，我们可以切换 collapse 的值，从而实现菜单的折叠和展开。CSS样式部分用于设置折叠和展开状态下菜单的宽度。