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

<div class="linkage">
  <el-select
   v-model="sheng"
   @change="choseProvince"//这个change事件是select的，不是option的，别写在option里面
   placeholder="省级地区">
   <el-option
    v-for="item in province"
    :key="item.id"
    :label="item.value"
    :value="item.id">
   </el-option>
  </el-select>
  <el-select
   v-model="shi"
   @change="choseCity"
   placeholder="市级地区">
   <el-option
    v-for="item in shi1"
    :key="item.id"
    :label="item.value"
    :value="item.id">
   </el-option>
  </el-select>
  <el-select
   v-model="qu"
   @change="choseBlock"
   placeholder="区级地区">
   <el-option
    v-for="item in qu1"
    :key="item.id"
    :label="item.value"
    :value="item.id">
   </el-option>
  </el-select>
 </div>

import axios from 'axios'
export default {
 data () {
  return {
   mapJson:'../static/json/map.json',
   province:'',
   sheng: '',
   shi: '',
   shi1: [],
   qu: '',
   qu1: [],
   city:'',
   block:'',
  }
 },
 methods:{
  // 加载china地点数据，三级
   getCityData:function(){
    var that = this
    axios.get(this.mapJson).then(function(response){
     if (response.status==200) {
      var data = response.data
      that.province = []
      that.city = []
      that.block = []
      // 省市区数据分类
      for (var item in data) {
       if (item.match(/0000$/)) {//省
        that.province.push({id: item, value: data[item], children: []})
       } else if (item.match(/00$/)) {//市
        that.city.push({id: item, value: data[item], children: []})
       } else {//区
        that.block.push({id: item, value: data[item]})
       }
      }
      // 分类市级
      for (var index in that.province) {
       for (var index1 in that.city) {
        if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
         that.province[index].children.push(that.city[index1])
        }
       }
      }
      // 分类区级
      for(var item1 in that.city) {
       for(var item2 in that.block) {
        if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
         that.city[item1].children.push(that.block[item2])
        }
       }
      }
     }
     else{
      console.log(response.status)
     }
    }).catch(function(error){console.log(typeof+ error)})
   },
   // 选省
   choseProvince:function(e) {
    for (var index2 in this.province) {
     if (e === this.province[index2].id) {
       console.log(this.province[index2].id)//你选择的省级编码
      console.log(this.province[index2].value)//省级编码 对应的汉字 
      this.shi1 = this.province[index2].children
      this.shi = this.province[index2].children[0].value
      this.qu1 =this.province[index2].children[0].children
      this.qu = this.province[index2].children[0].children[0].value
      this.E = this.qu1[0].id
     }
    }
   },
   // 选市
   choseCity:function(e) {
    for (var index3 in this.city) {
     if (e === this.city[index3].id) {
      this.qu1 = this.city[index3].children
      this.qu = this.city[index3].children[0].value
      this.E = this.qu1[0].id
      // console.log(this.E)
     }
    }
   },
   // 选区
   choseBlock:function(e) {
    this.E=e;
    // console.log(this.E)
   },
  },
  created:function(){
   this.getCityData()
  }
}