若依框架实现一级目录和左侧二级菜单的联动

在前端框架中，实现一级目录和左侧二级菜单的联动通常涉及到菜单的展开和折叠。以下是一个使用Vue.js和Element UI的简单示例：

<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px">
      <el-menu
        :default-openeds="defaultOpeneds"
        @open="handleSubmenuOpen"
        router
      >
        <el-submenu v-for="item in menuItems" :index="item.index" :key="item.index">
          <template slot="title">{{ item.title }}</template>
          <el-menu-item
            v-for="subItem in item.subItems"
            :index="subItem.path"
            :key="subItem.title"
          >
            {{ subItem.title }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 主要内容区 -->
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      defaultOpeneds: [],
      menuItems: [
        {
          index: '1',
          title: '一级目录1',
          subItems: [
            { title: '二级菜单1-1', path: '/item1/subitem1-1' },
            { title: '二级菜单1-2', path: '/item1/subitem1-2' }
          ]
        },
        {
          index: '2',
          title: '一级目录2',
          subItems: [
            { title: '二级菜单2-1', path: '/item2/subitem2-1' },
            { title: '二级菜单2-2', path: '/item2/subitem2-2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleSubmenuOpen(index) {
      this.defaultOpeneds = [index];
    }
  }
};
</script>

在这个例子中，我们使用了Element UI的<el-menu>和<el-submenu>组件来构建菜单，并通过default-openeds属性来控制展开的子菜单。handleSubmenuOpen方法用于更新当前展开的子菜单索引，使其与用户的选择同步。

请注意，这个例子假设你已经有了Vue和Element UI的基础知识，并且已经在项目中正确安装和配置了Element UI。同时，它使用了Vue Router，假设你的项目中已经配置了相应的路由。