当前位置：首页 > VUE

vue实现左右菜单联动实现

2026-02-10 19:31:44VUE

Vue 实现左右菜单联动

数据绑定与状态管理

使用 Vue 的响应式数据特性，将左右菜单的数据绑定到同一个状态对象。通过 v-model 或 :value 实现双向绑定，确保一侧菜单的变化能实时反映到另一侧。

data() {
  return {
    leftMenu: [],
    rightMenu: [],
    activeItem: null // 当前选中项
  };
}

事件监听与联动逻辑

为左右菜单的点击事件添加监听器，通过事件触发更新另一侧菜单的状态。使用 @click 或自定义事件实现交互。

vue实现左右菜单联动实现

methods: {
  handleLeftClick(item) {
    this.activeItem = item;
    this.rightMenu = this.generateRightMenu(item); // 根据左菜单项生成右菜单
  },
  handleRightClick(item) {
    // 右菜单点击逻辑
  }
}

动态渲染右菜单

根据左菜单的选中项动态生成右菜单内容。可以通过计算属性或方法实现数据的过滤与映射。

vue实现左右菜单联动实现

computed: {
  filteredRightMenu() {
    return this.rightMenu.filter(item => item.parentId === this.activeItem.id);
  }
}

样式与交互优化

为选中项添加高亮样式，增强用户体验。通过 :class 动态绑定样式类。

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

示例完整代码

以下是一个简单的实现示例：

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

<script>
export default {
  data() {
    return {
      leftMenu: [
        { id: 1, name: '菜单1' },
        { id: 2, name: '菜单2' }
      ],
      rightMenu: [
        { id: 11, name: '子菜单1-1', parentId: 1 },
        { id: 12, name: '子菜单1-2', parentId: 1 },
        { id: 21, name: '子菜单2-1', parentId: 2 }
      ],
      activeItem: null
    };
  },
  computed: {
    filteredRightMenu() {
      return this.rightMenu.filter(item => item.parentId === this.activeItem?.id);
    }
  },
  methods: {
    handleLeftClick(item) {
      this.activeItem = item;
    },
    handleRightClick(item) {
      console.log('右菜单点击:', item);
    }
  }
};
</script>

<style>
.menu-container {
  display: flex;
}
.left-menu, .right-menu {
  width: 200px;
  border: 1px solid #eee;
}
.active {
  background-color: #f0f0f0;
}
</style>