Vue 地区四级联动代码示例 - 实现省市区县选择

<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">
      <option value="">请选择区县</option>
      <option v-for="item in districtList" :value="item">{{ item }}</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      province: '',
      city: '',
      district: '',
      provinceList: ['省份1', '省份2', '省份3'], // 省份列表
      cityList: [], // 城市列表
      districtList: [], // 区县列表
      provinceCityMap: { // 省份与城市的映射关系
        '省份1': ['城市1', '城市2', '城市3'],
        '省份2': ['城市4', '城市5', '城市6'],
        '省份3': ['城市7', '城市8', '城市9']
      },
      cityDistrictMap: { // 城市与区县的映射关系
        '城市1': ['区县1', '区县2', '区县3'],
        '城市2': ['区县4', '区县5', '区县6'],
        '城市3': ['区县7', '区县8', '区县9'],
        '城市4': ['区县10', '区县11', '区县12'],
        '城市5': ['区县13', '区县14', '区县15'],
        '城市6': ['区县16', '区县17', '区县18'],
        '城市7': ['区县19', '区县20', '区县21'],
        '城市8': ['区县22', '区县23', '区县24'],
        '城市9': ['区县25', '区县26', '区县27'],
      }
    }
  },
  methods: {
    handleProvinceChange() {
      this.cityList = this.provinceCityMap[this.province] || [];
      this.districtList = [];
      this.city = '';
      this.district = '';
    },
    handleCityChange() {
      this.districtList = this.cityDistrictMap[this.city] || [];
      this.district = '';
    }
  }
}
</script>
<p>以上代码实现了一个简单的地区四级联动，其中<code>provinceList</code>为省份列表，<code>cityList</code>为城市列表，<code>districtList</code>为区县列表。<code>provinceCityMap</code>和<code>cityDistrictMap</code>分别为省份与城市的映射关系和城市与区县的映射关系。在选择省份和城市时，根据选择的值更新城市和区县的列表，并将选中的值绑定到<code>province</code>、<code>city</code>和<code>district</code>中。</p>