elementui menu 左侧菜单切换控制右边内容

Element UI 的 `menu` 组件是一个用于创建导航栏菜单的组件，它常用于管理左侧的导航结构。当用户通过点击左侧菜单项时，通常会联动右侧的内容区域（如路由视图、面板等），展示对应选中的页面或功能。

例如，在 Vue.js 中，你可以这样做：

<template>
  <el-menu :default-active="currentIndex" class="el-menu-demo">
    <!-- 菜单项配置 -->
    <el-menu-item index="1">选项一</el-menu-item>
    <el-menu-item index="2">选项二</el-menu-item>
    <!-- 更多菜单项... -->
    <el-submenu index="3">
      <template slot="title">选项三</template>
      <el-menu-item index="3-1">子项一</el-menu-item>
      <el-menu-item index="3-2">子项二</el-menu-item>
    </el-submenu>
  </el-menu>
  <div v-show="currentIndex === '1'" class="content1">这是选项一对应的右侧内容</div>
  <div v-show="currentIndex === '2'" class="content2">这是选项二对应的右侧内容</div>
  <!-- 更多内容区域... -->
</template>

<script>
export default {
  data() {
    return {
      currentIndex: '1', // 初始显示的第一个菜单项
      // 可以添加更多的选项和关联内容...
    };
  },
};
</script>

在这个例子中，`default-active` 属性设置默认激活的菜单项，`v-show` 指令用于控制右侧内容的显示或隐藏。当用户选择左侧的菜单项时，`currentIndex` 会动态更新，相应地展示对应的 `.contentX` 区域。