vue3 下拉框三级联动compute

可以使用 Vue 3 的计算属性（computed）来实现下拉框的三级联动。以下是一个简单的示例：

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

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

    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option value="">请选择区县</option>
      <option v-for="district in districts" :key="district" :value="district">{{ district }}</option>
    </select>
  </div>
</template>

<script>
import { computed, ref } from 'vue';

export default {
  setup() {
    const provinces = ['北京', '上海', '深圳'];
    const cities = ref([]);
    const districts = ref([]);

    const selectedProvince = ref('');
    const selectedCity = ref('');
    const selectedDistrict = ref('');

    const filteredCities = computed(() => {
      if (!selectedProvince.value) return [];

      // 这里可以根据选中的省份来返回对应的城市列表
      // 这里只是简单地返回了一个假数据
      switch (selectedProvince.value) {
        case '北京':
          return ['北京市'];
        case '上海':
          return ['上海市'];
        case '深圳':
          return ['深圳市'];
        default:
          return [];
      }
    });

    const filteredDistricts = computed(() => {
      if (!selectedCity.value) return [];

      // 这里可以根据选中的城市来返回对应的区县列表
      // 这里只是简单地返回了一个假数据
      switch (selectedCity.value) {
        case '北京市':
          return ['东城区', '西城区', '朝阳区'];
        case '上海市':
          return ['黄浦区', '徐汇区', '长宁区'];
        case '深圳市':
          return ['福田区', '罗湖区', '南山区'];
        default:
          return [];
      }
    });

    // 监听选中的省份变化，更新城市列表和区县列表
    watch(selectedProvince, (value) => {
      selectedCity.value = '';
      selectedDistrict.value = '';
      cities.value = filteredCities.value;
      districts.value = [];
    });

    // 监听选中的城市变化，更新区县列表
    watch(selectedCity, (value) => {
      selectedDistrict.value = '';
      districts.value = filteredDistricts.value;
    });

    return {
      provinces,
      cities,
      districts,
      selectedProvince,
      selectedCity,
      selectedDistrict,
    };
  },
};
</script>

在这个示例中，我们使用了 `computed` 函数来创建两个计算属性 `filteredCities` 和 `filteredDistricts`，它们分别根据选中的省份和城市来返回对应的城市列表和区县列表。我们还使用了 `watch` 函数来监听选中的省份和城市的变化，从而实现联动效果。