vue实现左右菜单联动

实现左右菜单联动的基本思路

在Vue中实现左右菜单联动，通常需要以下核心逻辑：左侧菜单作为导航分类，右侧内容随左侧选中项动态变化。可通过组件通信、状态管理或路由参数实现数据联动。

数据结构设计

建议将菜单数据设计为嵌套结构，便于维护和渲染：

data() {
  return {
    leftMenu: [
      {
        id: 1,
        name: '分类1',
        children: [
          { id: 11, name: '子项1' },
          { id: 12, name: '子项2' }
        ]
      },
      // 更多分类...
    ],
    activeLeftId: null // 当前选中的左侧菜单ID
  }
}

左侧菜单组件实现

使用v-for渲染左侧菜单，并通过点击事件更新选中状态：

<template>
  <div class="left-menu">
    <div 
      v-for="item in leftMenu" 
      :key="item.id"
      @click="handleLeftClick(item.id)"
      :class="{ 'active': activeLeftId === item.id }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

右侧内容联动逻辑

通过计算属性或watch监听左侧选中项的变化，动态过滤右侧内容：

computed: {
  rightContent() {
    const selected = this.leftMenu.find(item => item.id === this.activeLeftId)
    return selected ? selected.children : []
  }
}

双向联动增强体验

添加右侧滚动定位功能时，可通过ref获取DOM元素位置：

methods: {
  scrollToItem(itemId) {
    const el = this.$refs[`item_${itemId}`]
    if (el) el.scrollIntoView({ behavior: 'smooth' })
  }
}

完整组件示例

<template>
  <div class="menu-container">
    <div class="left-menu">
      <div 
        v-for="item in leftMenu" 
        :key="item.id"
        @click="selectCategory(item)"
        :class="{ 'active': activeCategory === item.id }"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="right-content">
      <div 
        v-for="sub in activeSubItems" 
        :key="sub.id"
        :ref="`item_${sub.id}`"
      >
        {{ sub.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftMenu: [], // 从API获取或本地定义
      activeCategory: null
    }
  },
  computed: {
    activeSubItems() {
      const cat = this.leftMenu.find(item => item.id === this.activeCategory)
      return cat ? cat.children : []
    }
  },
  methods: {
    selectCategory(item) {
      this.activeCategory = item.id
    }
  }
}
</script>

<style scoped>
.menu-container {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 200px;
  overflow-y: auto;
}
.right-content {
  flex: 1;
  overflow-y: auto;
}
.active {
  background-color: #eee;
}
</style>

性能优化建议

对于大型菜单数据，可采用虚拟滚动技术：

import { RecycleScroller } from 'vue-virtual-scroller'
// 在模板中替换v-for为虚拟滚动组件

路由参数联动方案

若需URL同步状态，可使用路由参数：

watch: {
  '$route.params.categoryId'(newVal) {
    this.activeCategory = parseInt(newVal)
  }
}