当前位置：首页 > VUE

vue实现多级联动

2026-01-21 12:59:30VUE

Vue 实现多级联动的方法

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

使用 v-model 和 computed 属性

定义数据结构和计算属性，根据上级选择动态更新下级选项：

data() {
  return {
    provinces: ['北京', '上海', '广东'],
    cities: {
      '北京': ['朝阳区', '海淀区'],
      '上海': ['黄浦区', '浦东新区'],
      '广东': ['广州市', '深圳市']
    },
    selectedProvince: '',
    selectedCity: ''
  }
},
computed: {
  availableCities() {
    return this.selectedProvince ? this.cities[this.selectedProvince] : []
  }
}

模板部分：

<select v-model="selectedProvince">
  <option value="">请选择省份</option>
  <option v-for="province in provinces" :value="province">{{ province }}</option>
</select>

<select v-model="selectedCity" :disabled="!selectedProvince">
  <option value="">请选择城市</option>
  <option v-for="city in availableCities" :value="city">{{ city }}</option>
</select>

使用 watch 监听变化

当需要异步加载数据时，可以使用 watch：

watch: {
  selectedProvince(newVal) {
    if (newVal) {
      // 模拟异步请求
      setTimeout(() => {
        this.availableCities = this.cities[newVal]
      }, 300)
    }
  }
}

使用递归组件实现无限级联动

对于不确定层级深度的场景，可以创建递归组件：

// TreeSelect.vue
<template>
  <select v-model="selectedValue" @change="onChange">
    <option value="">请选择</option>
    <option v-for="item in options" :value="item.id">{{ item.name }}</option>
  </select>
  <TreeSelect 
    v-if="childOptions.length"
    :options="childOptions"
    @select="onChildSelect"
  />
</template>

<script>
export default {
  name: 'TreeSelect',
  props: ['options'],
  data() {
    return {
      selectedValue: '',
      childOptions: []
    }
  },
  methods: {
    onChange() {
      const selected = this.options.find(item => item.id === this.selectedValue)
      this.childOptions = selected ? selected.children : []
      this.$emit('select', selected)
    },
    onChildSelect(item) {
      this.$emit('select', item)
    }
  }
}
</script>