vue三级联动下拉菜单

Vue三级联动下拉菜单可以通过嵌套的`<select>`标签实现。以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinces: [
        { id: 'p1', name: '北京市' },
        { id: 'p2', name: '上海市' }
      ],
      cities: [],
      districts: []
    }
  },
  methods: {
    onProvinceChange() {
      // 根据选择的省份更新城市列表
      this.selectedCity = ''
      this.selectedDistrict = ''
      if (this.selectedProvince === 'p1') {
        this.cities = [
          { id: 'c1', name: '北京市' }
        ]
      } else if (this.selectedProvince === 'p2') {
        this.cities = [
          { id: 'c2', name: '上海市' }
        ]
      } else {
        this.cities = []
        this.districts = []
        return
      }
      // 重置区县列表
      this.districts = []
    },
    onCityChange() {
      // 根据选择的城市更新区县列表
      this.selectedDistrict = ''
      if (this.selectedCity === 'c1') {
        this.districts = [
          { id: 'd1', name: '东城区' },
          { id: 'd2', name: '西城区' },
          { id: 'd3', name: '朝阳区' }
        ]
      } else if (this.selectedCity === 'c2') {
        this.districts = [
          { id: 'd4', name: '黄浦区' },
          { id: 'd5', name: '徐汇区' },
          { id: 'd6', name: '长宁区' }
        ]
      } else {
        this.districts = []
      }
    }
  }
}
</script>

在上面的代码中，我们使用了三个`<select>`标签，分别用于显示省份、城市和区县。每个`<select>`标签都绑定了一个`v-model`指令，用于双向绑定选择的值。当选择省份时，我们通过`onProvinceChange`方法更新城市列表；当选择城市时，我们通过`onCityChange`方法更新区县列表。

注意，我们在更新列表时都对已选择的值进行了重置，以防止出现无效的选项。同时，我们在每个列表的第一项中添加了一个空值选项，以便用户可以选择“请选择”这个选项。

希望这个示例能够对你有所帮助！