vue实现地区控件
Vue 地区控件实现方法
基于 Element UI 的 Cascader 组件
安装 Element UI 依赖：
npm install element-ui在 Vue 项目中注册组件：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-charter/index.css'
Vue.use(ElementUI)模板部分代码：
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange"
></el-cascader>
</template>数据与逻辑部分：
export default {
data() {
return {
selectedOptions: [],
options: [{
value: 'beijing',
label: '北京',
children: [{
value: 'haidian',
label: '海淀区'
}, {
value: 'chaoyang',
label: '朝阳区'
}]
}]
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
}使用第三方地区数据
安装地区数据包：
npm install china-area-data组件实现：
import { province, city, area } from 'china-area-data'
export default {
data() {
return {
provinces: province,
cities: [],
areas: [],
selectedProvince: '',
selectedCity: '',
selectedArea: ''
}
},
watch: {
selectedProvince(val) {
this.cities = city[val] || []
this.selectedCity = ''
this.selectedArea = ''
},
selectedCity(val) {
this.areas = area[val] || []
this.selectedArea = ''
}
}
}自定义递归组件实现
创建地区组件：
<template>
<div>
<select v-model="selectedProvince" @change="loadCities">
<option value="">选择省份</option>
<option v-for="p in provinces" :value="p.code">{{ p.name }}</option>
</select>
<select v-model="selectedCity" @change="loadAreas">
<option value="">选择城市</option>
<option v-for="c in cities" :value="c.code">{{ c.name }}</option>
</select>
<select v-model="selectedArea">
<option value="">选择区县</option>
<option v-for="a in areas" :value="a.code">{{ a.name }}</option>
</select>
</div>
</template>异步加载地区数据
使用 axios 获取远程数据：
methods: {
async loadProvinces() {
const response = await axios.get('/api/provinces')
this.provinces = response.data
},
async loadCities() {
if (!this.selectedProvince) return
const response = await axios.get(`/api/cities?province=${this.selectedProvince}`)
this.cities = response.data
}
}注意事项
地区数据需要保持更新，建议定期同步最新行政区划信息
对于移动端应用，可以考虑使用 picker 组件替代 select 元素
大型项目中建议将地区数据存储在 Vuex 中统一管理
性能优化方面，对于数据量大的情况可采用虚拟滚动技术
