下拉框选择中国省市区

前言

可以看官方文档，文档讲的也非常通俗易懂

安装依赖

npm install element-china-area-data -S

如何使用

需要的数据

• options为绑定的地区数据，数据就需要从下载的依赖中引入(地区数据共两种，第一种v-model收集到code，第二种v-model收集到汉字)
• v-model绑定的值为当前选择的地区(根据options绑定数据的不同，v-model呈2种形式code和汉字)

可引入的数据

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

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

一、第一种数据(v-mode显示code)

1.regionData(三级联动 省、市、区。)

通过v-model获取当前选中的地区code后 可以通过codeToText[code]获取到汉字

<template>
  <div id="app">
   <div>v-model绑定值:{{ pcc }}</div>
   <div>使用codeToText转码后:{{ pccText }}</div>
   
    <el-cascader size="large" :options="options" v-model="pcc"></el-cascader>
  </div>
</template>
<script>
// codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市
import { regionData, codeToText} from "element-china-area-data";
export default {
  data() {
    return {
      options: regionData,
      pcc: [],
    }
  },
   computed: {
    pccText() {
      return [codeToText[this.pcc[0]], codeToText[this.pcc[1]], codeToText[this.pcc[2]]]
    }
  },
}
</script>

效果

2.provinceAndCityData(二级联动 省、市。没有区)

使用方法与上面的regionData一样还是获取的code只不过没有区

二、第二种数据(v-mode显示汉字)

1.pcaTextArr(三级联动 省、市、区。)

<template>
  <div id="app">
   <div>v-model绑定值:{{ pcc }}</div>
  
    <el-cascader size="large" :options="options" v-model="pcc"></el-cascader>
  </div>
</template>
<script>
import { pcaTextArr} from "element-china-area-data";
export default {
  data() {
    return {
      options: pcaTextArr,
      pcc: [],
    }
  },
}
</script>

效果

2.pcTextArr(三级联动 省、市。没有区)

使用方法与上面的pcaTextArr一样还是获取的汉字只不过没有区