js和vue实现三级联查

以下是一个简单的示例，使用Vue实现三级联动选择。

HTML：

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

JS：

new Vue({
  el: '#app',
  data: {
    provinces: [
      { id: 1, name: '北京' },
      { id: 2, name: '上海' },
      { id: 3, name: '广东' },
    ],
    cities: [],
    districts: [],
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: '',
  },
  methods: {
    onProvinceChange() {
      if (this.selectedProvince) {
        // 选择省份后，加载对应的城市列表
        this.cities = this.getCityListByProvinceId(this.selectedProvince);
        // 重置选择的城市和区域
        this.selectedCity = '';
        this.selectedDistrict = '';
      } else {
        this.cities = [];
        this.districts = [];
        this.selectedCity = '';
        this.selectedDistrict = '';
      }
    },
    onCityChange() {
      if (this.selectedCity) {
        // 选择城市后，加载对应的区域列表
        this.districts = this.getDistrictListByCityId(this.selectedCity);
        // 重置选择的区域
        this.selectedDistrict = '';
      } else {
        this.districts = [];
        this.selectedDistrict = '';
      }
    },
    getCityListByProvinceId(provinceId) {
      // 根据省份ID获取城市列表的逻辑
      // 省份ID为1时，返回北京市和天津市
      if (provinceId === 1) {
        return [
          { id: 11, name: '北京市' },
          { id: 12, name: '天津市' },
        ];
      }
      // 省份ID为2时，返回上海市
      if (provinceId === 2) {
        return [
          { id: 21, name: '上海市' },
        ];
      }
      // 省份ID为3时，返回广州市、深圳市和珠海市
      if (provinceId === 3) {
        return [
          { id: 31, name: '广州市' },
          { id: 32, name: '深圳市' },
          { id: 33, name: '珠海市' },
        ];
      }
      return [];
    },
    getDistrictListByCityId(cityId) {
      // 根据城市ID获取区域列表的逻辑
      // 城市ID为11时，返回海淀区和朝阳区
      if (cityId === 11) {
        return [
          { id: 111, name: '海淀区' },
          { id: 112, name: '朝阳区' },
        ];
      }
      // 城市ID为12时，返回河东区和河西区
      if (cityId === 12) {
        return [
          { id: 121, name: '河东区' },
          { id: 122, name: '河西区' },
        ];
      }
      // 城市ID为21时，返回黄浦区和徐汇区
      if (cityId === 21) {
        return [
          { id: 211, name: '黄浦区' },
          { id: 212, name: '徐汇区' },
        ];
      }
      // 城市ID为31时，返回天河区和越秀区
      if (cityId === 31) {
        return [
          { id: 311, name: '天河区' },
          { id: 312, name: '越秀区' },
        ];
      }
      // 城市ID为32时，返回南山区和福田区
      if (cityId === 32) {
        return [
          { id: 321, name: '南山区' },
          { id: 322, name: '福田区' },
        ];
      }
      // 城市ID为33时，返回香洲区和金湾区
      if (cityId === 33) {
        return [
          { id: 331, name: '香洲区' },
          { id: 332, name: '金湾区' },
        ];
      }
      return [];
    },
  },
});

在这个示例中，有三个下拉列表，分别用于选择省份、城市和区域。当选择省份后，会根据选中的省份ID加载对应的城市列表。选择城市后，会根据选中的城市ID加载对应的区域列表。这个过程中，选择的省份、城市和区域ID会保存在Vue实例的data属性中的相应变量中，可以用于后续的操作。