vue实现省市县三级联动

首先，你需要准备好三个级别的数据，即省份、城市和区县的数据。可以通过接口或者静态数据文件的方式获取这些数据。

然后，在Vue组件中，你可以使用v-model指令绑定一个变量来保存用户选择的省市县信息。接着，你可以使用三个下拉框来实现省市县三级联动，当用户选择省份时，触发change事件，根据省份的值动态生成城市下拉框的选项，当用户选择城市时，再次触发change事件，动态生成区县的选项。

以下是实现省市县三级联动的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="handleProvinceChange">
      <option v-for="(province, index) in provinces" :key="index" :value="province">{{province}}</option>
    </select>
    <select v-model="selectedCity" @change="handleCityChange">
      <option v-for="(city, index) in cities" :key="index" :value="city">{{city}}</option>
    </select>
    <select v-model="selectedCounty">
      <option v-for="(county, index) in counties" :key="index" :value="county">{{county}}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedCounty: '',
      provinces: ['北京市', '上海市', '广东省'], // 假设这里是省份数据
      cities: [], // 城市数据
      counties: [] // 区县数据
    }
  },
  methods: {
    handleProvinceChange() {
      // 根据选择的省份动态生成城市选项
      // 假设这里是根据接口获取的城市数据
      this.cities = ['广州市', '深圳市', '珠海市'];
      this.selectedCity = '';
      this.counties = [];
    },
    handleCityChange() {
      // 根据选择的城市动态生成区县选项
      // 假设这里是根据接口获取的区县数据
      this.counties = ['天河区', '越秀区', '海珠区'];
      this.selectedCounty = '';
    }
  }
}
</script>

当用户选择省份时，会触发handleProvinceChange方法，根据选择的省份动态生成城市选项。当用户选择城市时，会触发handleCityChange方法，根据选择的城市动态生成区县选项。通过v-model指令和事件绑定的方式，实现了省市县三级联动功能。