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、效果圖展示