用vue实现全国城市三级联动下拉框

实现全国城市三级联动下拉框可以使用Vue.js的组件化开发方式，将下拉框封装成一个组件，然后通过组件之间的通信实现三级联动效果。

首先，需要准备城市数据。可以从一些开放的API获取，这里推荐使用高德地图API获取全国城市数据。具体操作可以参考高德地图开发文档，这里不再赘述。

然后，在Vue项目中创建城市选择组件。在组件中定义三个下拉框，分别绑定省、市、区/县的数据源，并设置默认值。当省下拉框的值改变时，触发change事件，根据省的value值获取对应的市数据，更新市下拉框的数据源和默认值。同理，当市下拉框的值改变时，触发change事件，根据市的value值获取对应的区/县数据，更新区/县下拉框的数据源和默认值。

下面是示例代码：

<template>
  <div>
    <select v-model="province" @change="selectProvince">
      <option v-for="p in provinces" :value="p.adcode">{{ p.name }}</option>
    </select>
    <select v-model="city" @change="selectCity">
      <option v-for="c in cities" :value="c.adcode">{{ c.name }}</option>
    </select>
    <select v-model="district">
      <option v-for="d in districts" :value="d.adcode">{{ d.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [], // 省数据源
      cities: [], // 市数据源
      districts: [], // 区/县数据源
      province: '', // 省默认值
      city: '', // 市默认值
      district: '' // 区/县默认值
    }
  },
  mounted() {
    // 获取省数据，默认显示第一个省的数据
    this.$axios.get('/api/province').then(res => {
      this.provinces = res.data
      this.province = this.provinces[0].adcode
      this.selectProvince()
    })
  },
  methods: {
    selectProvince() {
      // 根据省的adcode获取市数据，默认显示第一个市的数据
      this.$axios.get(`/api/city?adcode=${this.province}`).then(res => {
        this.cities = res.data
        this.city = this.cities[0].adcode
        this.selectCity()
      })
    },
    selectCity() {
      // 根据市的adcode获取区/县数据，默认显示第一个区/县的数据
      this.$axios.get(`/api/district?adcode=${this.city}`).then(res => {
        this.districts = res.data
        this.district = this.districts[0].adcode
      })
    }
  }
}
</script>

这里使用了axios库发送http请求获取城市数据，可以根据实际情况选择其他库或原生的XMLHttpRequest对象。

最后，将城市选择组件引入到需要使用的页面中即可。

<template>
  <div>
    <h2>请选择城市</h2>
    <city-select></city-select>
  </div>
</template>

<script>
import CitySelect from '@/components/CitySelect'

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

这样就完成了全国城市三级联动下拉框的实现。