elementplus实现左侧菜单栏收缩与展开

在Element Plus中，实现左侧菜单栏的收缩与展开可以通过使用<el-menu>组件的collapse属性来控制。以下是一个简单的例子：

<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu
        :collapse="isCollapsed"
        unique-opened
        :collapse-transition="false"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">
          <el-icon><Location /></el-icon>
          <template #title>导航一</template>
        </el-menu-item>
        <!-- 更多菜单项 -->
      </el-menu>
    </el-aside>
    <el-main style="background-color: #eaedf1">
      <!-- 主要内容 -->
    </el-main>
  </el-container>
</template>
 
<script setup>
import { ref } from 'vue';
import { Location } from '@element-plus/icons-vue';
 
const isCollapsed = ref(false);
 
function toggleMenu() {
  isCollapsed.value = !isCollapsed.value;
}
</script>
 
<style>
/* 根据需要添加样式 */
</style>

在这个例子中，isCollapsed是一个响应式数据，它的值为true时菜单折叠，为false时菜单展开。通过点击一个按钮或其他操作来触发toggleMenu函数，该函数将isCollapsed的值从true切换到false或从false切换到true，从而实现菜单的折叠和展开。