element-ui 实现省市区联动

近期做一个关于物流的项目需要实现获取全国的省市区的功能。查阅资料发现element-ui里面直接提供了这样的一个插件，并且发现十分的好用，于是便直接拿来使用了。

预览

省市区联动组件

有想体验的小伙伴可以进入Element China Area Data体验。

安装

在使用插件前必不可少的操作当然是引入插件啦。

1	npm i element-china-area-data

使用

在你需要使用的页面中引入相应的模块功能

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

如下是功能模块的功能介绍

模块	功能介绍
`provinceAndCityData`	省市二级联动数据（不带“全部”选项）
`regionData`	省市区三级联动数据（不带“全部”选项）
`provinceAndCityDataPlus`	省市区三级联动数据（带“全部”选项）
`regionDataPlus`	省市区三级联动数据（带“全部”选项）
`CodeToText`	大对象，属性是区域码，属性值是汉字，可以将区域码转化成真实地址
`TextToCode`	大对象，属性是汉字，属性值是区域码，可以将真实地址转化成区域码

“全部”选项绑定的value是空字符串""
我们需要使用什么类型的组件，就在data中配置options选项即可，如下有示例。

区域码转地址

当我们存储的数据是区域码时，为了显示出来是真实地址，我们需要将区域码转成真实地址，具体的操作我们可以使用CodeToText大对象进行获取。

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  // 引入省市区三级联动数据（不带“全部”选项）  
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData, //配置数据项
        selectedOptions: []
      }
    },
 	
    methods: {
      handleChange (value) {
        console.log(value)// 此处获取的是区域码
        console.log(CodeToText[value]) // 将区域码转化成真实地址
        console.log(CodeToText['110000'])  // 将输出北京市
      }
    }
  }
</script>

地址转区域码

我们有时可能需要将省市区真实地址转化成区域码进行存储，我们可以使用如下操作

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  // 引入省市区三级联动数据（带“全部”选项）  
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(TextToCode['北京市'].code) // 将输出110000
        console.log(TextToCode['北京市']['市辖区'].code) // 将输出110100  
        console.log(TextToCode['北京市']['市辖区']['朝阳区'].code) // 将输出110105  
      }
    }
  }
</script>