vue 省市县三级联动选择器

Vue.js是一个流行的JavaScript框架，用于构建用户界面。要实现省市县三级联动选择器，你可以使用Vue.js结合一些插件或组件来实现。

下面是一种常见的实现方法：

1. 安装所需的插件或组件：
- vue-select：用于选择省、市和县的下拉菜单。
- axios：用于发送HTTP请求，获取省市县数据。

2. 创建一个Vue组件：

   <template>
     <div>
       <select v-model="selectedProvince" @change="getCities">
         <option value="">请选择省份</option>
         <option v-for="province in provinces" :key="province.id" :value="province.id">{{ province.name }}</option>
       </select>
       <select v-model="selectedCity" @change="getCounties">
         <option value="">请选择城市</option>
         <option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
       </select>
       <select v-model="selectedCounty">
         <option value="">请选择县/区</option>
         <option v-for="county in counties" :key="county.id" :value="county.id">{{ county.name }}</option>
       </select>
     </div>
   </template>

   <script>
   import axios from 'axios';

   export default {
     data() {
       return {
         selectedProvince: '',
         selectedCity: '',
         selectedCounty: '',
         provinces: [],
         cities: [],
         counties: [],
       };
     },
     mounted() {
       this.getProvinces();
     },
     methods: {
       getProvinces() {
         axios.get('/api/provinces')
           .then(response => {
             this.provinces = response.data;
           })
           .catch(error => {
             console.error(error);
           });
       },
       getCities() {
         axios.get(`/api/cities?provinceId=${this.selectedProvince}`)
           .then(response => {
             this.cities = response.data;
             this.selectedCity = '';
             this.counties = [];
           })
           .catch(error => {
             console.error(error);
           });
       },
       getCounties() {
         axios.get(`/api/counties?cityId=${this.selectedCity}`)
           .then(response => {
             this.counties = response.data;
             this.selectedCounty = '';
           })
           .catch(error => {
             console.error(error);
           });
       },
     },
   };
   </script>

3. 根据实际情况修改接口地址和数据结构。

这是一个简单的示例，你可以根据自己的需求进行修改和扩展。同时，你还需要在后端实现相应的接口来获取省市县数据。