vue实现三级联动组件修改数据源_vue实现省市区三级联动

Vue 实现三级联动组件有很多种方式，以下是一种常见的实现方式：

1. 创建一个 Vue 组件，包含三个下拉框，分别用于选择省、市、区。

2. 在组件中定义数据源，可以使用 JSON 格式，例如：

   data() {
     return {
       provinces: [
         { id: 1, name: '北京市' },
         { id: 2, name: '上海市' },
         { id: 3, name: '广东省' }
       ],
       cities: [
         { id: 1, name: '北京市', parentId: 1 },
         { id: 2, name: '上海市', parentId: 2 },
         { id: 3, name: '广州市', parentId: 3 },
         { id: 4, name: '深圳市', parentId: 3 }
       ],
       areas: [
         { id: 1, name: '东城区', parentId: 1 },
         { id: 2, name: '西城区', parentId: 1 },
         { id: 3, name: '黄浦区', parentId: 2 },
         { id: 4, name: '徐汇区', parentId: 2 },
         { id: 5, name: '天河区', parentId: 3 },
         { id: 6, name: '番禺区', parentId: 3 },
         { id: 7, name: '南山区', parentId: 4 },
         { id: 8, name: '福田区', parentId: 4 }
       ],
       selectedProvince: '',
       selectedCity: '',
       selectedArea: ''
     }
   }

其中，`provinces` 数组保存所有的省份信息，`cities` 数组保存所有的城市信息，`areas` 数组保存所有的区县信息。

3. 绑定下拉框的选项值和显示文本：

   <select v-model="selectedProvince">
     <option value="">请选择省份</option>
     <option v-for="province in provinces" :value="province.id">{{ province.name }}</option>
   </select>
   <select v-model="selectedCity" :disabled="!selectedProvince">
     <option value="">请选择城市</option>
     <option v-for="city in cities.filter(city => city.parentId == selectedProvince)" :value="city.id">{{ city.name }}</option>
   </select>
   <select v-model="selectedArea" :disabled="!selectedCity">
     <option value="">请选择区县</option>
     <option v-for="area in areas.filter(area => area.parentId == selectedCity)" :value="area.id">{{ area.name }}</option>
   </select>

在第二个和第三个下拉框中，通过 `:disabled` 属性来控制选项是否可用，当上级下拉框没有选择时，下级下拉框将被禁用。

4. 监听下拉框选项的变化，并更新选中的数据：

   watch: {
     selectedProvince: function(val) {
       this.selectedCity = '';
       this.selectedArea = '';
     },
     selectedCity: function(val) {
       this.selectedArea = '';
     }
   }

当选择的省份发生变化时，清空已选中的城市和区县；当选择的城市发生变化时，清空已选中的区县。

这样，一个简单的省市区三级联动组件就完成了。