elementui 左侧菜单栏切换

Element UI 提供了一个灵活的导航组件 `el-menu`，用于创建左侧或顶部的菜单栏。如果你想实现在页面上切换左侧菜单，你可以按照以下步骤操作：

1. 在 Vue 项目中引入 Element UI，并安装所需的依赖：

npm install element-ui --save

2. 引入并注册 Element UI 全局样式和组件：

import { ElMenu, ElSubmenu } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

Vue.use(ElMenu);
Vue.component('ElSubmenu', ElSubmenu); // 如果你需要子菜单

3. 创建一个包含多个 `ElMenuItem` 或 `ElSubmenu` 的 `el-menu` 组件，在模板中添加：

<template>
  <div>
    <el-menu default-active="1" :collapse="isCollapsed" @open="handleOpen" @close="handleClose">
      <el-submenu index="1">
        <template slot="title">一级菜单</template>
        <el-menu-item index="1-1">子菜单 1</el-menu-item>
        <el-menu-item index="1-2">子菜单 2</el-menu-item>
      </el-submenu>
      <el-menu-item index="2">二级菜单</el-menu-item>
      <!-- 更多菜单项... -->
    </el-menu>
  </div>
</template>

4. 定义控制菜单展开/折叠状态的方法（如 `isCollapsed` 和处理点击事件）：

export default {
  data() {
    return {
      isCollapsed: true, // 初始折叠状态
    };
  },
  methods: {
    handleOpen(index) {
      this.isCollapsed = false; // 展开
    },
    handleClose(index) {
      this.isCollapsed = true; // 折叠
    },
  },
};

5. 根据需要调整菜单结构和状态，例如可以通过路由变化动态更新 `default-active` 值，或者监听其他触发条件。