前端工作過程中難免會要用到選擇地址的時候，除了從后臺獲取特定地區(qū)數(shù)據(jù)的情況外，一般都是全國的省市區(qū)提供給用戶選擇，Element UI 提供了一個很好的插件。

Element UI 中國省市區(qū)級聯(lián)數(shù)據(jù)

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是省市二級聯(lián)動數(shù)據(jù)（不帶“全部”選項）
   • regionData是省市區(qū)三級聯(lián)動數(shù)據(jù)（不帶“全部”選項）
   • provinceAndCityDataPlus是省市區(qū)三級聯(lián)動數(shù)據(jù)（帶“全部”選項）
   • regionDataPlus是省市區(qū)三級聯(lián)動數(shù)據(jù)（帶“全部”選項）
   • "全部"選項綁定的value是空字符串""
   • CodeToText是個大對象，屬性是區(qū)域碼，屬性值是漢字 用法例如：CodeToText['110000']輸出北京市
   • TextToCode是個大對象，屬性是漢字，屬性值是區(qū)域碼 用法例如：TextToCode['北京市'].code輸出110000,TextToCode['北京市']['市轄區(qū)'].code輸出110100,TextToCode['北京市']['市轄區(qū)']['朝陽區(qū)'].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值為區(qū)域碼
                // 用CodeToText轉(zhuǎn)換成中文
                console.log(CodeToText[value[0]]) 
                console.log(CodeToText[value[1]]) 
            }
        }
    }
</script>