实现全国城市三级
联动下拉框需要以下步骤：
1. 在 Vue 中定义三个
下拉框组件，分别表示省、市和区。
2. 定义一个城市数据的 JSON 对象，包含省、市和区的信息。
3. 在省的
下拉框中，绑定一个 change 事件，当省的选项发生改变时，更新市的选项。
4. 在市的
下拉框中，绑定一个 change 事件，当市的选项发生改变时，更新区的选项。
5.
实现一个方法，根据当前选中的省、市和区，返回对应的城市信息。
以下是一个简单的
实现示例：
1. 定义省、市和区的
下拉框组件
```
<template>
<select v-model="selected" @change="
onChange">
<option value="">请选择</option>
<option v-for="item in options" :value="item.name">{{item.name}}</option>
</select>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => []
},
value: {
type: String,
default: ''
}
},
data() {
return {
selected: this.value
}
},
methods: {
onChange() {
this.$emit('input', this.selected)
}
}
}
</script>
```
2. 城市数据的 JSON 对象
```
const cityData = [
{
"name": "北京市",
"children": [
{
"name": "北京市",
"children": [
{"name": "东城区"},
{"name": "西城区"},
{"name": "朝阳区"},
{"name": "丰台区"},
{"name": "石景山区"},
{"name": "海淀区"},
{"name": "门头沟区"},
{"name": "房山区"},
{"name": "通州区"},
{"name": "顺义区"},
{"name": "昌平区"},
{"name": "大兴区"},
{"name": "怀柔区"},
{"name": "平谷区"},
{"name": "密云区"},
{"name": "延庆区"}
]
}
]
},
{
"name": "上海市",
"children": [
{
"name": "上海市",
"children": [
{"name": "黄浦区"},
{"name": "徐汇区"},
{"name": "长宁区"},
{"name": "静安区"},
{"name": "普陀区"},
{"name": "虹口区"},
{"name": "杨浦区"},
{"name": "闵行区"},
{"name": "宝山区"},
{"name": "嘉定区"},
{"name": "浦东新区"},
{"name": "金山区"},
{"name": "松江区"},
{"name": "青浦区"},
{"name": "奉贤区"},
{"name": "崇明区"}
]
}
]
},
// 其他省市数据
]
```
3. 在父组件中，渲染三个
下拉框组件，并绑定对应的城市数据和事件处理方法
```
<template>
<div>
<city-select :options="provinces" v-model="selectedProvince"></city-select>
<city-select :options="cities" v-model="selectedCity"></city-select>
<city-select :options="districts" v-model="selectedDistrict"></city-select>
</div>
</template>
<script>
import CitySelect from './CitySelect.vue'
export default {
components: {
CitySelect
},
data() {
return {
provinces: cityData,
cities: [],
districts: [],
selectedProvince: '',
selectedCity: '',
selectedDistrict: ''
}
},
watch: {
selectedProvince(value) {
if (!value) {
this.cities = []
this.districts = []
return
}
const province = this.provinces.find(item => item.name === value)
this.cities = province.children || []
this.selectedCity = ''
this.districts = []
},
selectedCity(value) {
if (!value) {
this.districts = []
return
}
const province = this.provinces.find(item => item.name === this.selectedProvince)
const city = province.children.find(item => item.name === value)
this.districts = city.children || []
this.selectedDistrict = ''
}
},
methods: {
getSelectedCity() {
const province = this.provinces.find(item => item.name === this.selectedProvince)
const city = province.children.find(item => item.name === this.selectedCity)
const district = city.children.find(item => item.name === this.selectedDistrict)
return {
province: this.selectedProvince,
city: this.selectedCity,
district: this.selectedDistrict
}
}
}
}
</script>
```
在父组件中，通过 watch 监听选项的变化，更新下一级选项。通过 getSelectedCity 方法获取当前选中的城市信息。最后，渲染三个 CitySelect 组件，分别绑定对应的城市数据和 v-model 指令。
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
