vue3 3级联动下拉框代码

在Vue 3中实现三级联动下拉框，通常会使用v-model绑定数据以及动态组件或递归组件来构建这种交互。这里是一个简单的例子：

首先，你需要创建一个包含所有级别的选项的数据结构，例如：

data() {
  return {
    provinceList: [], // 省份列表
    cityList: {}, // 城市字典，键为省份id，值为城市列表
    districtList: {}, // 区域字典，同理
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: ''
  };
}

然后在HTML模板中，你可以使用`<select>`元素配合`v-model`来实现联动：

<template>
  <div>
    <select v-model="selectedProvince" @change="loadCityList">
      <option value="">请选择省份</option>
      <option v-for="(province, index) in provinceList" :key="index" :value="province.id">{{ province.name }}</option>
    </select>

    <select v-model="selectedCity" @change="loadDistrictList">
      <option v-if="selectedProvince === ''">请选择省份</option>
      <option v-for="(city, key) in cityList[selectedProvince]" :key="key" :value="city.id">{{ city.name }}</option>
    </select>

    <select v-model="selectedDistrict" @change="handleDistrictChange">
      <option v-if="selectedCity === ''">请选择城市</option>
      <option v-for="(district, key) in districtList[selectedCity]" :key="key" :value="district.id">{{ district.name }}</option>
    </select>
  </div>
</template>

接下来，在JavaScript部分处理数据加载和更新：

methods: {
  loadCityList() {
    this.$axios.get('/api/provinces') // 假设这是获取省级数据的API
      .then(response => {
        this.provinceList = response.data;
        this.cityList = {}; // 清空城市字典，准备填充
      })
      .catch(error => console.error(error));
  },
  
  loadDistrictList() {
    if (this.selectedProvince) {
      this.$axios.get(`/api/cities/${this.selectedProvince}`) // 获取指定省份的城市数据
        .then(response => {
          this.cityList[this.selectedProvince] = response.data;
        })
        .catch(error => console.error(error));
    }
  },
  
  handleDistrictChange() {
    // 类似地，如果选择了城市，再获取该城市的区域数据
    if (this.selectedCity) {
      this.$axios.get(`/api/districts/${this.selectedCity}`) // 获取指定城市的数据
        .then(response => {
          this.districtList[this.selectedCity] = response.data;
        })
        .catch(error => console.error(error));
    }
  }
}