elemenetUI下拉框单独选择省份和市区

elementUI 有一个专门处理级联选择器的，可以同时进行 省市区 三级联动，但是公司项目要求只要选择【省】和【市】，且两个下拉框都得分开，这时候就可以把 【element-china-area-data】的数据进行拆分，需求如下：

1. 【省】【市】两个下拉框分开，选中【省】之后同时更新【市】的下拉框（对应上）
2. 以下市辖区比较特别，归属于【省】，且选中之后其【市】的下拉框也是一样的，其中有

北京市，天津市，上海市，重庆市，香港特别行政区，澳门特别行政区

分析完以上需求后完整代码如下：

<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】版本，所以就不深究了（偷懒~~）