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`方法更新区县列表。
注意，我们在更新列表时都对已选择的值进行了
重置，以防止出现无效的
选项。同时，我们在每个列表的第一项中添加了一个空值
选项，以便用户可以选择“请选择”这个
选项。
希望这个示例能够对你有所帮助！
扫一扫
2777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
