当前位置：首页 > VUE

vue实现联动菜单

2026-03-08 14:28:27VUE

Vue 实现联动菜单的方法

联动菜单通常指多个下拉菜单之间存在依赖关系，例如选择省份后，城市菜单动态更新。以下是几种常见的实现方式：

使用 v-model 和 watch

通过 v-model 绑定选择的值，使用 watch 监听变化并更新下级菜单数据：

<template>
  <select v-model="selectedProvince">
    <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
  </select>

  <select v-model="selectedCity">
    <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      selectedProvince: null,
      selectedCity: null
    }
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = this.getCitiesByProvince(newVal)
    }
  },
  methods: {
    getCitiesByProvince(provinceId) {
      // 根据省份ID获取城市列表
    }
  }
}
</script>

使用计算属性

当下级菜单数据完全依赖于上级选择时，计算属性更简洁：

vue实现联动菜单

<template>
  <select v-model="selectedCategory">
    <option v-for="c in categories" :value="c.id">{{ c.name }}</option>
  </select>

  <select v-model="selectedSubcategory">
    <option v-for="s in subcategories" :value="s.id">{{ s.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      categories: [],
      selectedCategory: null
    }
  },
  computed: {
    subcategories() {
      return this.categories.find(c => c.id === this.selectedCategory)?.subcategories || []
    }
  }
}
</script>

使用事件触发

通过 @change 事件显式触发更新：

<template>
  <select @change="onProvinceChange">
    <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
  </select>

  <select>
    <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
  </select>
</template>

<script>
export default {
  methods: {
    onProvinceChange(e) {
      this.fetchCities(e.target.value)
    }
  }
}
</script>

使用第三方组件

对于复杂场景，可以使用现成的联动选择组件：

vue实现联动菜单

Element UI 的 Cascader 级联选择器
Ant Design Vue 的 Cascader
Vuetify 的 Select 组合

异步数据加载

当需要从API获取下级数据时：

async fetchCities(provinceId) {
  this.cities = await api.getCities(provinceId)
}

多级联动实现

对于三级及以上联动，建议：

保持数据结构扁平化
使用递归组件或动态组件
考虑使用 Vuex 管理共享状态

<template>
  <div v-for="(menu, index) in menus" :key="index">
    <select @change="handleChange(index, $event)">
      <option v-for="item in menu.options" :value="item.value">{{ item.label }}</option>
    </select>
  </div>
</template>

实现联动菜单时需注意：