城市多選級聯是一種常見的需求,Vue作為前端框架可以很好地實現這個功能。基本思路是通過監聽選擇的省份,然后根據省份動態生成對應的城市列表。
data() {
return {
provinces: [
{ name: '江蘇省', cities: ['南京市', '蘇州市', '無錫市'] },
{ name: '安徽省', cities: ['合肥市', '蕪湖市', '馬鞍山市'] },
{ name: '浙江省', cities: ['杭州市', '寧波市', '溫州市'] }
],
selectedProvince: '',
selectedCities: []
}
},
computed: {
cities() {
const province = this.provinces.find(p =>p.name === this.selectedProvince)
return province ? province.cities : []
}
},
methods: {
handleProvinceChange(val) {
this.selectedProvince = val
this.selectedCities = []
},
handleCityChange(val) {
this.selectedCities = val
}
}
上面是一個簡單的例子,其中provinces是所有省份及其對應城市的列表,selectedProvince和selectedCities分別是選擇的省份和城市。在computed中,根據選擇的省份動態生成對應城市列表,同時在methods中監聽省份和城市選擇的變化。
<template>
<div>
<el-select v-model="selectedProvince" placeholder="請選擇省份" @change="handleProvinceChange">
<el-option v-for="province in provinces" :key="province.name" :label="province.name" :value="province.name"></el-option>
</el-select>
<el-select v-model="selectedCities" placeholder="請選擇城市" multiple @change="handleCityChange">
<el-option v-for="(city, index) in cities" :key="index" :label="city" :value="city"></el-option>
</el-select>
</div>
</template>
最后,在模板中使用Element UI Select組件來展示選擇框,其中el-select用于選擇省份,el-option則通過v-for指令循環展示所有省份,并綁定對應值。城市選擇框采用multiple多選模式,通過v-for循環展示動態生成的城市列表,同時綁定選擇的城市。
在實際開發過程中,還可加入一些優化和改進。例如根據業務需求對選擇框的樣式進行自定義,添加搜索功能等。總之,通過Vue的組件化和響應式特性,實現城市多選級聯非常方便。