Element UI 中国省市区级联数据

目录

1、npm 安装

2、级联数据引入

3、细节 Tips

4、页面使用

5、效果图展示

---

看到简书上有一篇关于地区级联的文章，转载一下，希望能帮助到大家。文章出处：Element UI 省市区级联数据

前端工作过程中难免会要用到选择地址的时候，除了从后台获取特定地区数据的情况外，一般都是全国的省市区提供给用户选择，Element UI 提供了一个很好的插件。

1、npm 安装

npm install element-china-area-data -save

2、级联数据引入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } 
    from 'element-china-area-data'

3、细节 Tips

1. provinceAndCityData是省市二级联动数据（不带“全部”选项）
2. regionData是省市区三级联动数据（不带“全部”选项）
3. provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
4. regionDataPlus是省市区三级联动数据（带“全部”选项）
5. "全部"选项绑定的value是空字符串""
6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
7. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

4、页面使用

<template>
    <div id="app">
        <el-cascader :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
    </div>
</template>
<script>
    import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'
    export default {
        data () {
            return {
                options: provinceAndCityDataPlus,
                selectedOptions: []
            }
        },
        methods: {
            handleChange (value) {
                console.log(value) // value值为区域码
                // 用CodeToText转换成中文
                console.log(CodeToText[value[0]]) 
                console.log(CodeToText[value[1]]) 
            }
        }
    }
</script>

5、效果图展示