vue3实现省市区三级联动
时间: 2023-11-09 10:02:03 浏览: 65
实现省市区三级联动,可以使用Vue3的v-model和watch来实现。具体步骤如下:
1. 在data中定义三个变量,分别表示省、市、区的选中值。
2. 在模板中使用select标签来渲染省、市、区的选项,并使用v-model绑定对应的选中值。
3. 使用watch监听省、市的选中值的变化,当选中值发生变化时,根据选中值获取对应的市、区数据,并更新市、区的选项。
示例代码如下:
```html
<template>
<div>
<select v-model="selectedProvince" @change="onProvinceChange">
<option value="">请选择省份</option>
<option v-for="province in provinces" :value="province">{{ province }}</option>
</select>
<select v-model="selectedCity" @change="onCityChange">
<option value="">请选择城市</option>
<option v-for="city in cities" :value="city">{{ city }}</option>
</select>
<select v-model="selectedDistrict">
<option value="">请选择区县</option>
<option v-for="district in districts" :value="district">{{ district }}</option>
</select>
</div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
setup() {
const data = reactive({
provinces: ['北京', '上海', '广东'],
cities: {
'北京': ['北京市'],
'上海': ['上海市'],
'广东': ['广州市', '深圳市', '珠海市']
},
districts: {
'北京市': ['东城区', '西城区', '朝阳区'],
'上海市': ['黄浦区', '徐汇区', '长宁区'],
'广州市': ['天河区', '海珠区', '荔湾区'],
'深圳市': ['福田区', '罗湖区', '南山区'],
'珠海市': ['香洲区', '斗门区', '金湾区']
},
selectedProvince: '',
selectedCity: '',
selectedDistrict: ''
});
watch(() => data.selectedProvince, (newValue) => {
if (newValue) {
data.cities[newValue] && (data.selectedCity = data.cities[newValue][0]);
data.districts[data.selectedCity] && (data.selectedDistrict = data.districts[data.selectedCity][0]);
} else {
data.selectedCity = '';
data.selectedDistrict = '';
}
});
watch(() => data.selectedCity, (newValue) => {
if (newValue) {
data.districts[newValue] && (data.selectedDistrict = data.districts[newValue][0]);
} else {
data.selectedDistrict = '';
}
});
function onProvinceChange() {
data.selectedCity = '';
data.selectedDistrict = '';
}
function onCityChange() {
data.selectedDistrict = '';
}
return {
...data,
onProvinceChange,
onCityChange
};
}
};
</script>
```