vue中通过element-china-area-data实现省市区三级联动

1.实现效果

2.安装 使用

1)   npm install element-china-area-data -S

2)   import {
        provinceAndCityData,     //省市二级联动数据，汉字+code
        pcTextArr,                        //省市联动数据，纯汉字
        regionData,                      //省市区三级联动数据
        pcaTextArr,                       //省市区联动数据，纯汉字
        codeToText,                      //是个大对象，属性是区域码，属性值是汉字
} from "element-china-area-data";

3）使用regionData，返回的是编码数组，如下图：

 可以使用codeToText['110000']转换为中文北京市，

4）使用pcaTextArr，返回的是纯汉字数组，如下图：

 

3.代码实例

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