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

好的，下面我来给你介绍一下用 Vue 实现全国城市三级联动下拉框的方法。

首先，你需要准备一个城市数据文件（例如 `city.json`），包含了全国所有省市区的信息。

接着，你可以使用 Vue 的组件来实现三级联动下拉框。

1. 创建 Vue 组件

在 Vue 组件中，我们需要定义一个 `data` 对象来存储城市数据和用户选择的城市信息，以及一个 `methods` 对象来处理用户选择城市时的逻辑。

<template>
  <div>
    <select v-model="province" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="p in provinces" :value="p.name">{{ p.name }}</option>
    </select>
    <select v-model="city" @change="onCityChange">
      <option value="">请选择城市</option>
      <option v-for="c in cities" :value="c.name">{{ c.name }}</option>
    </select>
    <select v-model="district">
      <option value="">请选择区县</option>
      <option v-for="d in districts" :value="d.name">{{ d.name }}</option>
    </select>
  </div>
</template>

<script>
import cityData from './city.json';

export default {
  data() {
    return {
      provinces: cityData,
      cities: [],
      districts: [],
      province: '',
      city: '',
      district: '',
    };
  },
  methods: {
    onProvinceChange() {
      this.cities = this.provinces.find(p => p.name === this.province).cities;
      this.city = '';
      this.districts = [];
      this.district = '';
    },
    onCityChange() {
      this.districts = this.cities.find(c => c.name === this.city).districts;
      this.district = '';
    },
  },
};
</script>

在这个组件中，我们使用了 `v-model` 指令来绑定用户选择的省市区信息。当用户选择省份时，我们需要根据省份名字查找对应的城市信息，然后更新下拉框中的城市选项；当用户选择城市时，我们需要根据城市名字查找对应的区县信息，然后更新下拉框中的区县选项。

2. 加载城市数据

在组件的 `data` 中，我们将城市数据加载到了 `provinces` 属性中，这个属性是一个数组，每个元素包含了一个省份的信息，包括省份名字和包含所有城市信息的数组。

在这里，我们使用了 `import` 语句导入城市数据文件，然后将其赋值给 `provinces` 属性。你也可以使用 ajax 请求加载城市数据，这里就不再赘述。

3. 渲染下拉框

在组件的模板中，我们使用了 HTML 的 `<select>` 元素来渲染省市区的下拉框。使用 `v-for` 指令循环渲染下拉框的选项，使用 `v-model` 指令来实现双向绑定。在每个下拉框的 `change` 事件处理函数中，我们更新对应的城市或区县信息。

4. 完整代码

下面是完整的代码示例：

<template>
  <div>
    <select v-model="province" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="p in provinces" :value="p.name">{{ p.name }}</option>
    </select>
    <select v-model="city" @change="onCityChange">
      <option value="">请选择城市</option>
      <option v-for="c in cities" :value="c.name">{{ c.name }}</option>
    </select>
    <select v-model="district">
      <option value="">请选择区县</option>
      <option v-for="d in districts" :value="d.name">{{ d.name }}</option>
    </select>
  </div>
</template>

<script>
import cityData from './city.json';

export default {
  data() {
    return {
      provinces: cityData,
      cities: [],
      districts: [],
      province: '',
      city: '',
      district: '',
    };
  },
  methods: {
    onProvinceChange() {
      this.cities = this.provinces.find(p => p.name === this.province).cities;
      this.city = '';
      this.districts = [];
      this.district = '';
    },
    onCityChange() {
      this.districts = this.cities.find(c => c.name === this.city).districts;
      this.district = '';
    },
  },
};
</script>

希望这个示例能够帮助到你。