vue结合element实现三级联动

<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'  //引入element省市区数据
  export default {
    data () {
      return {
        options: regionData , 
        selectedOptions: []   // 返回数据显示
      }
    }，

methods: {
      handleChange (value) {
              console.log(value)   // 打印输出
       }
    }
</script>

<style>
</style>

控制台命令下载  npm install element-china-area-data -S

自动在main.js导入   

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

实现样式

可以参考element-china-area-data - npm (npmjs.com)