vue实现左右菜单联动

实现思路

通过监听左侧菜单的点击事件，动态更新右侧菜单的内容。可以使用Vue的响应式数据绑定和事件机制来实现联动效果。

基础结构设计

在Vue组件中定义两个数据属性分别存储左右菜单的内容：

data() {
  return {
    leftMenus: [
      { id: 1, name: '菜单1' },
      { id: 2, name: '菜单2' }
    ],
    rightMenus: [],
    menuRelations: {
      1: [
        { id: 11, name: '子菜单1-1' },
        { id: 12, name: '子菜单1-2' }
      ],
      2: [
        { id: 21, name: '子菜单2-1' },
        { id: 22, name: '子菜单2-2' }
      ]
    }
  }
}

模板部分

<div class="menu-container">
  <div class="left-menu">
    <ul>
      <li v-for="menu in leftMenus" 
          :key="menu.id"
          @click="selectLeftMenu(menu.id)">
        {{ menu.name }}
      </li>
    </ul>
  </div>

  <div class="right-menu">
    <ul>
      <li v-for="item in rightMenus" 
          :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</div>

联动逻辑实现

添加方法处理左侧菜单点击事件：

methods: {
  selectLeftMenu(menuId) {
    this.rightMenus = this.menuRelations[menuId] || []
  }
}

样式处理

添加基础样式确保布局：

.menu-container {
  display: flex;
  height: 100%;
}

.left-menu {
  width: 200px;
  border-right: 1px solid #eee;
}

.right-menu {
  flex: 1;
  padding-left: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 12px;
  cursor: pointer;
}

li:hover {
  background-color: #f5f5f5;
}

高级功能扩展

添加当前选中状态的样式反馈：

data() {
  return {
    // 新增当前选中ID
    activeLeftMenuId: null
  }
}

methods: {
  selectLeftMenu(menuId) {
    this.activeLeftMenuId = menuId
    this.rightMenus = this.menuRelations[menuId] || []
  }
}

模板中增加选中状态：

<li v-for="menu in leftMenus"
    :key="menu.id"
    @click="selectLeftMenu(menu.id)"
    :class="{ 'active': activeLeftMenuId === menu.id }">
  {{ menu.name }}
</li>

添加active样式：

.active {
  color: #409eff;
  background-color: #ecf5ff;
}

动态加载优化

对于大数据量场景，可以采用动态加载方式：

async selectLeftMenu(menuId) {
  this.activeLeftMenuId = menuId
  try {
    const res = await api.getRightMenus(menuId)
    this.rightMenus = res.data
  } catch (error) {
    console.error(error)
  }
}