vue实现级联选择器

Vue实现级联选择器需要使用Vue的数据绑定和计算属性的特性。下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="updateCityOptions">
      <option disabled value="">请选择省份</option>
      <option v-for="province in provinces" :key="province">{{ province }}</option>
    </select>
    <select v-model="selectedCity">
      <option disabled value="">请选择城市</option>
      <option v-for="city in cityOptions" :key="city">{{ city }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: ['江苏省', '浙江省', '广东省'], // 省份列表
      cities: {
        '江苏省': ['南京市', '苏州市', '无锡市'],
        '浙江省': ['杭州市', '宁波市', '温州市'],
        '广东省': ['广州市', '深圳市', '珠海市']
      }, // 城市列表
      selectedProvince: '', // 选中的省份
      selectedCity: '', // 选中的城市
    };
  },
  computed: {
    cityOptions() {
      return this.cities[this.selectedProvince] || []; // 根据选中的省份获取城市列表
    }
  },
  methods: {
    updateCityOptions() {
      this.selectedCity = ''; // 每次省份改变时，重置城市选择
    }
  }
};
</script>

上述代码通过两个select元素实现了级联选择器，第一个select用于选择省份，第二个select用于选择城市。当选择省份时，根据选中的省份获取相应的城市列表，并将城市列表绑定到第二个select上。同时，每次省份选择改变时，重置城市选择。