vue3 用watch制作一个省、市、区3级联动的下拉菜单,根据选择的省份(至少3个)显示对应的城市(至少3个)下拉菜单,根据选择的城市显示对应的区域(所有)下拉菜单。
时间: 2023-11-27 15:53:25 浏览: 94
好的,下面是一个简单的实现方法:
1. 在组件中定义三个变量:province、city、district,分别用于保存选中的省份、城市和区域。
2. 在模板中使用三个下拉菜单,分别为省份、城市和区域,使用v-model绑定对应的变量,例如:
```
<select v-model="province">
<option value="">请选择省份</option>
<option v-for="p in provinces" :value="p">{{ p }}</option>
</select>
<select v-model="city">
<option value="">请选择城市</option>
<option v-for="c in cities" :value="c">{{ c }}</option>
</select>
<select v-model="district">
<option value="">请选择区域</option>
<option v-for="d in districts" :value="d">{{ d }}</option>
</select>
```
3. 定义watch监听province变量的变化,当province变量发生变化时,获取对应的城市列表,并更新city变量和district变量:
```
watch: {
province: function(newVal, oldVal) {
// 根据选择的省份,获取对应的城市列表
this.cities = this.cityData[newVal];
// 清空城市和区域的选择
this.city = '';
this.district = '';
// 更新城市下拉菜单的选项
this.$nextTick(() => {
this.$refs.citySelect.selectedIndex = 0;
});
},
// 类似地,监听city变量的变化,获取对应的区域列表并更新district变量
city: function(newVal, oldVal) {
this.districts = this.districtData[newVal];
this.district = '';
this.$nextTick(() => {
this.$refs.districtSelect.selectedIndex = 0;
});
}
}
```
4. 在组件的created钩子中,初始化省份列表和城市、区域数据,例如:
```
created() {
// 初始化省份列表
this.provinces = Object.keys(this.cityData);
// 初始化城市和区域数据
this.cities = this.cityData[this.provinces[0]];
this.districts = this.districtData[this.cities[0]];
}
```
5. 最后,在组件中定义城市和区域数据的对象,例如:
```
data() {
return {
province: '',
city: '',
district: '',
provinces: [],
cities: [],
districts: [],
cityData: {
'广东省': ['深圳市', '广州市', '珠海市'],
'湖南省': ['长沙市', '株洲市', '湘潭市'],
'江苏省': ['南京市', '苏州市', '无锡市'],
},
districtData: {
'深圳市': ['福田区', '罗湖区', '南山区'],
'广州市': ['天河区', '越秀区', '海珠区'],
'珠海市': ['香洲区', '金湾区', '斗门区'],
'长沙市': ['芙蓉区', '天心区', '岳麓区'],
'株洲市': ['荷塘区', '芦淞区', '石峰区'],
'湘潭市': ['岳塘区', '雨湖区', '湘乡市'],
'南京市': ['玄武区', '鼓楼区', '建邺区'],
'苏州市': ['姑苏区', '吴中区', '相城区'],
'无锡市': ['崇安区', '南长区', '北塘区'],
}
}
}
```
这样就实现了一个简单的省、市、区3级联动的下拉菜单。
阅读全文