vue2 省市五级联动

在 Vue 2 中实现省市五级联动，可以以下步骤实现：

1. 创建组件：首先，创建一个 Vue 组件，用于展示省市五级联动的选择框。

2. 数据准备：准备好省市区县的数据，可以将数据存储在一个 JSON 文件中，或者通过接口请求获取。

3. 组件数据：在组件的 data 中定义所需的数据变量，包括省、市、区、县的列表、选中的值等。

4. 监听选择变化：通过监听选择框的变化事件，获取选择的值，并更新相应的数据变量。

5. 计算属性和方法：根据选择的值，计算出下一级的列表，并提供方法用于更新下一级的选择框。

6. 渲染模板：使用 v-for 指令渲染选择框的选项，并绑定选择事件。

7. 联动效果：在模板中使用 v-model 指令绑定选择框的值，实现联动效果。

下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="province" @change="handleProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="item in provinceList" :value="item">{{ item }}</option>
    </select>
    <select v-model="city" @change="handleCityChange">
      <option value="">请选择城市</option>
      <option v-for="item in cityList" :value="item">{{ item }}</option>
    </select>
    <select v-model="district" @change="handleDistrictChange">
      <option value="">请选择区县</option>
      <option v-for="item in districtList" :value="item">{{ item }}</option>
    </select>
    <select v-model="street">
      <option value="">请选择街道</option>
      <option v-for="item in streetList" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      province: '',
      city: '',
      district: '',
      street: '',
      provinceList: [],
      cityList: [],
      districtList: [],
      streetList: []
    };
  },
  mounted() {
    // 在 mounted 钩子中获取省份列表数据
    this.getProvinceList();
  },
  methods: {
    getProvinceList() {
      // 获取省份列表数据的方法，可以通过接口请求获取数据
      // 将获取到的数据赋值给 provinceList
    },
    handleProvinceChange() {
      // 省份选择框变化时的处理方法
      // 根据选择的省份，获取对应的城市列表数据
      // 将获取到的数据赋值给 cityList，同时清空后续级联的数据
    },
    handleCityChange() {
      // 城市选择框变化时的处理方法
      // 根据选择的城市，获取对应的区县列表数据
      // 将获取到的数据赋值给 districtList，同时清空后续级联的数据
    },
    handleDistrictChange() {
      // 区县选择框变化时的处理方法
      // 根据选择的区县，获取对应的街道列表数据
      // 将获取到的数据赋值给 streetList
    }
  }
};
</script>

以上示例是一个简单的省市五级联动的实现，你可以根据实际需求进行扩展和优化。希望能对你有所帮助！