vue3手写省市区街道四级联动一学就会！

前端

2023-08-23 14:25:54

vue3省市区街道四级联动：从入门到精通

准备JSON数据

第一步是获取包含省、市、区、街道数据的JSON文件。你可以从官方网站或其他来源下载该数据。确保数据格式与本文中提供的示例相同。

导入JSON数据

将JSON数据导入到你的vue3项目中。这通常通过在main.js文件中使用import语句来完成。

创建组件

接下来，创建一个名为ProvinceCityDistrictStreet.vue的组件。这个组件将负责渲染省市区街道四级联动。以下是组件代码：

<template>
  <div>
    <select v-model="selectedProvince">
      <option v-for="province in provinces" :key="province.name" :value="province.name">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity" disabled="!selectedProvince">
      <option v-for="city in cities" :key="city.name" :value="city.name">{{ city.name }}</option>
    </select>
    <select v-model="selectedDistrict" disabled="!selectedCity">
      <option v-for="district in districts" :key="district.name" :value="district.name">{{ district.name }}</option>
    </select>
    <select v-model="selectedStreet" disabled="!selectedDistrict">
      <option v-for="street in streets" :key="street" :value="street">{{ street }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      streets: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      selectedStreet: '',
    }
  },
  methods: {
    fetchProvinces() {
      // 从JSON数据中获取省份
      this.provinces = data.provinces;
    },
    fetchCities() {
      // 从JSON数据中根据选定的省份获取城市
      this.cities = this.provinces.find(province => province.name === this.selectedProvince).cities;
    },
    fetchDistricts() {
      // 从JSON数据中根据选定的城市获取区
      this.districts = this.cities.find(city => city.name === this.selectedCity).districts;
    },
    fetchStreets() {
      // 从JSON数据中根据选定的区获取街道
      this.streets = this.districts.find(district => district.name === this.selectedDistrict).streets;
    }
  },
  created() {
    this.fetchProvinces();
  },
  watch: {
    selectedProvince(newValue) {
      this.selectedCity = '';
      this.selectedDistrict = '';
      this.selectedStreet = '';
      this.fetchCities();
    },
    selectedCity(newValue) {
      this.selectedDistrict = '';
      this.selectedStreet = '';
      this.fetchDistricts();
    },
    selectedDistrict(newValue) {
      this.selectedStreet = '';
      this.fetchStreets();
    }
  }
}
</script>

使用组件

将ProvinceCityDistrictStreet.vue组件注册到你的vue3项目中。然后，你可以在你的模板文件中使用它。例如，在App.vue文件中，你可以使用如下代码：

<template>
  <div>
    <ProvinceCityDistrictStreet />
  </div>
</template>

<script>
import ProvinceCityDistrictStreet from './components/ProvinceCityDistrictStreet.vue'

export default {
  components: {
    ProvinceCityDistrictStreet
  }
}
</script>