当前位置：首页 > VUE

vue左右联动菜单实现

2026-02-22 14:40:50VUE

Vue 左右联动菜单实现

实现左右联动菜单的核心在于数据绑定和事件监听。以下是一种常见的实现方式：

数据结构设计

通常需要两个数组分别存储左右菜单的数据，并建立关联关系：

data() {
  return {
    leftMenu: [
      { id: 1, name: '分类1', rightItems: [...] },
      { id: 2, name: '分类2', rightItems: [...] }
    ],
    rightMenu: [],
    activeLeftId: null
  }
}

左侧菜单实现

使用v-for渲染左侧菜单，并通过点击事件更新右侧内容：

vue左右联动菜单实现

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

右侧菜单实现

根据选中的左侧菜单ID动态渲染右侧内容：

methods: {
  selectLeftMenu(item) {
    this.activeLeftId = item.id
    this.rightMenu = item.rightItems
  }
}

<div class="right-menu">
  <div v-for="subItem in rightMenu" :key="subItem.id">
    {{ subItem.name }}
  </div>
</div>

样式处理

添加基础样式使菜单更直观：

vue左右联动菜单实现

.left-menu {
  width: 30%;
  float: left;
}
.right-menu {
  width: 70%;
  float: left;
}
.active {
  background-color: #f0f0f0;
  color: #42b983;
}

优化交互体验

可以添加默认选中第一个左侧菜单：

mounted() {
  if (this.leftMenu.length > 0) {
    this.selectLeftMenu(this.leftMenu[0])
  }
}

响应式处理

使用计算属性确保数据响应：

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

这种方法适用于大多数联动菜单场景，可以根据实际需求调整数据结构和样式。对于更复杂的需求，可以考虑使用Vuex管理状态或封装成可复用组件。