省市区三省联动前端界面

以下是一个简单的示例，展示了一个基本的 Vue 组件，用于三省联动前端界面。这个示例包括一个省市区三级联动的选择器。

<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" v-if="selectedProvince">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
    </select>

    <select v-model="selectedDistrict" v-if="selectedCity">
      <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 {
      provinces: [
        { id: 1, name: '省份1' },
        { id: 2, name: '省份2' },
        // 其他省份
      ],
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    };
  },
  methods: {
    onProvinceChange() {
      // 根据选中的省份获取对应的城市列表，这里假设有一个函数 fetchCitiesByProvinceId 返回对应省份的城市列表
      this.cities = fetchCitiesByProvinceId(this.selectedProvince);
      this.selectedCity = ''; // 重置城市选择
      this.districts = []; // 重置区/县选择
    },
    onCityChange() {
      // 根据选中的城市获取对应的区/县列表，这里假设有一个函数 fetchDistrictsByCityId 返回对应城市的区/县列表
      this.districts = fetchDistrictsByCityId(this.selectedCity);
      this.selectedDistrict = ''; // 重置区/县选择
    }
  }
};
</script>

在这个简单的示例中，我们创建了一个包含省、市、区三级联动选择器的 Vue 组件。当选择省份时，会触发 onProvinceChange 方法，根据选中的省份获取对应的城市列表，并重置城市和区/县的选择。当选择城市时，会触发 onCityChange 方法，根据选中的城市获取对应的区/县列表，并重置区/县的选择。