vue 三级级联选择器

对于三级联动的选择器，Vue.js 的实现方式与两级联动的选择器类似，只需要在模板中添加一个额外的下拉框，以及相应的数据结构和事件处理函数即可。下面是一个简单的三级联动的省市区选择器的 Vue 组件实现：

<template>
  <div>
    <label>请选择省份：</label>
    <select v-model="selectedProvince">
      <option value="">请选择</option>
      <option v-for="(province, index) in provinces" :key="index" :value="province">{{ province }}</option>
    </select>

    <label>请选择城市：</label>
    <select v-model="selectedCity">
      <option value="">请选择</option>
      <option v-for="(city, index) in cities[selectedProvince]" :key="index" :value="city">{{ city }}</option>
    </select>

    <label>请选择区县：</label>
    <select v-model="selectedDistrict">
      <option value="">请选择</option>
      <option v-for="(district, index) in districts[selectedProvince][selectedCity]" :key="index" :value="district">{{ district }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinces: ['广东省', '湖南省'],
      cities: {
        '广东省': ['广州市', '深圳市', '珠海市', '汕头市'],
        '湖南省': ['长沙市', '株洲市', '湘潭市', '衡阳市']
      },
      districts: {
        '广东省': {
          '广州市': ['越秀区', '海珠区', '天河区', '白云区'],
          '深圳市': ['福田区', '罗湖区', '南山区', '宝安区'],
          '珠海市': ['香洲区', '斗门区', '金湾区'],
          '汕头市': ['金平区', '龙湖区', '濠江区', '潮阳区']
        },
        '湖南省': {
          '长沙市': ['芙蓉区', '天心区', '岳麓区', '开福区'],
          '株洲市': ['荷塘区', '芦淞区', '石峰区', '天元区'],
          '湘潭市': ['雨湖区', '岳塘区'],
          '衡阳市': ['珠晖区', '雁峰区', '石鼓区', '蒸湘区']
        }
      }
    }
  },
  watch: {
    selectedProvince(newVal) {
      this.selectedCity = '';
      this.selectedDistrict = '';
    },
    selectedCity(newVal) {
      this.selectedDistrict = '';
    }
  }
}
</script>

在这个 Vue 组件中，我们使用了与两级联动的选择器类似的模板和数据结构，只不过加入了一个额外的下拉框和相应的数据结构。同时，我们也添加了一个 `watch` 监听器来清空下一级的选项，以保证用户选择的合法性。这个实现方式也比较简单，你可以根据自己的需求做出相应的修改和扩展。