Element UI 中国省市区级联数据

一、安装

npm install element-china-area-data -S

二、import 使用

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

1. provinceAndCityData省市二级联动数据,汉字+code
2. regionData省市区三级联动数据
3. pcTextArr省市联动数据，纯汉字
4. pcaTextArr省市区联动数据，纯汉字
5. codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市

三、案例

 <el-form-item label="籍贯" prop="nativePlace">
         <el-cascader
             v-model="dataForm.nativePlace"
             @change="nativePlaceChange($event)"
             style="width: 100%"
             placeholder="如:北京市丰台区"
             clearable
             :options="nativePlaceOptions">
          </el-cascader>
 </el-form-item>
<script>
  import { regionData, codeToText, TextToCode } from "element-china-area-data";
  export default {
    data () {
      return {
        nativePlaceOptions: regionData,
      }
    },
    methods：{
         nativePlaceChange(item) {
            if (item) {
                this.dataForm.nativePlace = item[2]; //获取id
                
                //获取文字
                this.dataForm.nativePlaceText =
                codeToText[item[0]] +"/" + codeToText[item[1]] + "/" + codeToText[item[2]];
       
            }
         },
   }
  }
</script>