Element UI 地域层级联动数据实现

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

Element UI 中国省市区级联数据

1. 安装(使用 npm)
   npm install element-china-area-data -S
2. 引入
   import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
3. Tips
   • provinceAndCityData是省市二级联动数据（不带“全部”选项）
   • regionData是省市区三级联动数据（不带“全部”选项）
   • provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
   • regionDataPlus是省市区三级联动数据（带“全部”选项）
   • "全部"选项绑定的value是空字符串""
   • CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
   • TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
4. 页面使用

<template>
    <div id="app">
        <el-cascader size="large" :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>