vue三级联动下拉菜单
时间: 2023-06-21 17:10:47 浏览: 103
Vue三级联动下拉菜单可以通过嵌套的`<select>`标签实现。以下是一个简单的示例:
```html
<template>
<div>
<select v-model="selectedProvince" @change="onProvinceChange">
<option value="">请选择省份</option>
<option v-for="province in provinces" :key="province.id" :value="province.id">{{ province.name }}</option>
</select>
<select v-model="selectedCity" @change="onCityChange">
<option value="">请选择城市</option>
<option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
</select>
<select v-model="selectedDistrict">
<option value="">请选择区县</option>
<option v-for="district in districts" :key="district.id" :value="district.id">{{ district.name }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedProvince: '',
selectedCity: '',
selectedDistrict: '',
provinces: [
{ id: 'p1', name: '北京市' },
{ id: 'p2', name: '上海市' }
],
cities: [],
districts: []
}
},
methods: {
onProvinceChange() {
// 根据选择的省份更新城市列表
this.selectedCity = ''
this.selectedDistrict = ''
if (this.selectedProvince === 'p1') {
this.cities = [
{ id: 'c1', name: '北京市' }
]
} else if (this.selectedProvince === 'p2') {
this.cities = [
{ id: 'c2', name: '上海市' }
]
} else {
this.cities = []
this.districts = []
return
}
// 重置区县列表
this.districts = []
},
onCityChange() {
// 根据选择的城市更新区县列表
this.selectedDistrict = ''
if (this.selectedCity === 'c1') {
this.districts = [
{ id: 'd1', name: '东城区' },
{ id: 'd2', name: '西城区' },
{ id: 'd3', name: '朝阳区' }
]
} else if (this.selectedCity === 'c2') {
this.districts = [
{ id: 'd4', name: '黄浦区' },
{ id: 'd5', name: '徐汇区' },
{ id: 'd6', name: '长宁区' }
]
} else {
this.districts = []
}
}
}
}
</script>
```
在上面的代码中,我们使用了三个`<select>`标签,分别用于显示省份、城市和区县。每个`<select>`标签都绑定了一个`v-model`指令,用于双向绑定选择的值。当选择省份时,我们通过`onProvinceChange`方法更新城市列表;当选择城市时,我们通过`onCityChange`方法更新区县列表。
注意,我们在更新列表时都对已选择的值进行了重置,以防止出现无效的选项。同时,我们在每个列表的第一项中添加了一个空值选项,以便用户可以选择“请选择”这个选项。
希望这个示例能够对你有所帮助!
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)