vue三级联动下拉菜单

Vue三级联动下拉菜单可以通过使用Vue组件实现。下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange" :disabled="!selectedProvince">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city">{{ city.name }}</option>
    </select>
    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option value="">请选择区县</option>
      <option v-for="district in districts" :value="district">{{ district.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' },
        { id: 3, name: '广东' }
      ],
      cities: [],
      districts: [],
      selectedProvince: null,
      selectedCity: null,
      selectedDistrict: null
    }
  },
  methods: {
    onProvinceChange() {
      this.cities = this.selectedProvince ? this.selectedProvince.cities : []
      this.selectedCity = null
      this.districts = []
      this.selectedDistrict = null
    },
    onCityChange() {
      this.districts = this.selectedCity ? this.selectedCity.districts : []
      this.selectedDistrict = null
    }
  }
}
</script>

在这个示例中，我们使用了三个下拉菜单来选择省份、城市和区县。当选择省份时，相关的城市列表将被加载到第二个下拉菜单中。当选择城市时，相关的区县列表将被加载到第三个下拉菜单中。这个示例中的数据是硬编码的，但通常可以从后端API获取。