vue使用Element UI 实现选取省市区三级联动地址

在做电商项目的时候需要添加修改收货地址，如何实现三级联动选取省市区地址困扰了我不少时间。
难点：需要通过爬虫获取省市区数据。

后来无意发现了element-china-area-data这个组件，哈哈，实现效果还可以呦。

效果图：

选取地址中：

选好地址后显示：

好了，各位肯定想知道如何获取数据吧？

这就贴上代码吧：

下载element-china-area-data：

npm install element-china-area-data -S

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
  import {regionData,CodeToText} from 'element-china-area-data'
  export default {
    name: '',
    components: {},
    data () {
      return {
        options: regionData,
        selectedOptions: [],
        addtions:{},			//存储地址数据
      }
    },
    methods: {
      handleChange (value) {
      //我们选择地址后，selectedOptions 会保存对应的区域码，例如北京的区域码为'110000'
      //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
        this.addtions.selectedOptions = value
        var name = ''
        this.selectedOptions.map(item => name += CodeToText[item] + '/')
        this.addtions.names = name
        console.log(this.addtions.names)
        console.log(this.addtions)
      }
    },
    watch: {},
    computed: {},
    created () {

    },
    mounted () {

    },
    beforeDestrory () {

    },
    destroyed () {

    },
  }
</script>

<style lang="less">

</style>

对区域码和区域码转换成汉字觉得抽象的话，给张输出图你们看吧：

想了解更多这个组件的可以单击链接进行查阅