vue实现中国区域的三级联动

安装插件

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 {
 
    data () {
 
      return {
 
        options: regionData,
 
        selectedOptions: []
 
      }
 
    },
 
 
 
    methods: {
 
      handleChange (value) {
 
        let data =CodeToText[value[0]]+", "+CodeToText[value[1]]+", "+CodeToText[value[2]];
        console.log(data)
 
      }
 
    }
 
  }
 
</script>

实现效果