elementUI 有一个专门处理级联选择器的,可以同时进行 省市区 三级联动,但是公司项目要求只要选择【省】和【市】,且两个下拉框都得分开,这时候就可以把 【element-china-area-data】的数据进行拆分,需求如下:
- 【省】【市】两个下拉框分开,选中【省】之后同时更新【市】的下拉框(对应上)
- 以下市辖区比较特别,归属于【省】,且选中之后其【市】的下拉框也是一样的,其中有
北京市,天津市,上海市,重庆市,香港特别行政区,澳门特别行政区
分析完以上需求后完整代码如下:
<template>
<div id="app">
<div>
<!-- {{ provinceData }} -->
选择省份:
<el-select @change="handleChangeProvince" v-model="provinceText" filterable placeholder="请输入省份名称查询">
<el-option v-for="item in provinceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div>
选择城市:
<el-select v-model="cityText" filterable placeholder="请输入城市名称查询">
<el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</template>
<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
name: 'App',
data() {
return {
provinceData: regionData,
cityData: [],
provinceText: '',
cityText: '',
}
},
methods: {
handleChangeProvince(value) {
this.cityData = []
this.cityText = ''
const province = CodeToText[value]
if (province === '北京市' || province === '天津市' || province === '上海市' || province === '重庆市' ||
province === '香港特别行政区' || province === '澳门特别行政区') {
const city = { value: value, label: province }
this.cityData.push(city)
} else {
const childList = this.provinceData.find(i => i.value === value).children
this.cityData.push(...childList)
}
},
}
}
</script>
<style>
</style>
有个需要注意的问题,这里我使用的【element-china-area-data】是 【^5.0.2】版本,截止至目前最新的是【6.0.2】版本,新版的【区号】都变了,而且使用【CodeToText】进行区号转中文的时候会报错:区号对应不上中文,不知道是啥原因,由于公司项目用的是【5.0.2】版本,所以就不深究了(偷懒~~)