用vue3 v-model v-for watch制作一个省、市、区3级联动的下拉菜单,根据选择的省份(至少3个)显示对应的城市(至少3个)下拉菜单,根据选择的城市显示对应的区域(所有)下拉菜单。
时间: 2023-11-27 13:51:32 浏览: 98
vue省市区三联动下拉选择组件的实现
好的,以下是一个实现3级联动下拉菜单的示例代码:
HTML模板:
```
<template>
<div>
<select v-model="selectedProvince">
<option value="">请选择省份</option>
<option v-for="(province, index) in provinces" :value="province" :key="index">{{ province }}</option>
</select>
<select v-model="selectedCity">
<option value="">请选择城市</option>
<option v-for="(city, index) in cities" :value="city" :key="index">{{ city }}</option>
</select>
<select v-model="selectedDistrict">
<option value="">请选择区域</option>
<option v-for="(district, index) in districts" :value="district" :key="index">{{ district }}</option>
</select>
</div>
</template>
```
JavaScript代码:
```
<script>
import { watch, reactive } from 'vue';
export default {
name: 'CascadeSelect',
setup() {
const data = reactive({
provinces: ['广东省', '湖南省', '河北省'], // 省份列表
cities: [], // 城市列表
districts: [], // 区域列表
provinceCityMap: { // 省份和城市的映射关系
'广东省': ['广州市', '深圳市', '珠海市'],
'湖南省': ['长沙市', '株洲市', '湘潭市'],
'河北省': ['石家庄市', '保定市', '唐山市']
},
cityDistrictMap: { // 城市和区域的映射关系
'广州市': ['天河区', '越秀区', '海珠区'],
'深圳市': ['南山区', '福田区', '罗湖区'],
'珠海市': ['香洲区', '斗门区', '金湾区'],
'长沙市': ['岳麓区', '天心区', '芙蓉区'],
'株洲市': ['荷塘区', '芦淞区', '石峰区'],
'湘潭市': ['雨湖区', '岳塘区', '湘乡市'],
'石家庄市': ['长安区', '裕华区', '桥西区'],
'保定市': ['竞秀区', '莲池区', '满城区'],
'唐山市': ['路北区', '路南区', '古冶区']
},
selectedProvince: '', // 已选择的省份
selectedCity: '', // 已选择的城市
selectedDistrict: '' // 已选择的区域
});
// 监听已选择的省份,更新城市列表
watch(() => data.selectedProvince, (newVal) => {
if (newVal) {
data.cities = data.provinceCityMap[newVal];
data.selectedCity = '';
data.selectedDistrict = '';
} else {
data.cities = [];
data.districts = [];
data.selectedCity = '';
data.selectedDistrict = '';
}
});
// 监听已选择的城市,更新区域列表
watch(() => data.selectedCity, (newVal) => {
if (newVal) {
data.districts = data.cityDistrictMap[newVal];
data.selectedDistrict = '';
} else {
data.districts = [];
data.selectedDistrict = '';
}
});
return data;
}
};
</script>
```
以上代码中,我们使用了Vue 3中的`reactive`函数来创建一个响应式对象`data`,其中包含了省份、城市和区域的列表、映射关系以及已选择的省份、城市和区域。我们使用了`watch`函数来监听已选择的省份和城市,当它们发生变化时,我们更新城市列表和区域列表。最后,我们将`data`对象返回给模板,以便在模板中使用它。
阅读全文