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)
}
}
