效果图如下：

动图.gif

基于element框架的组件二次封装，可直观的选择所需要的地址(省-市)
效果为：鼠标经过省份，弹出省份下所有的城市。
arae.js点击可复制下载

<template>
  <div class="content">
    <div class="wrap">
    <el-checkbox-group v-model="pCheck" v-for="(item, index) in province_list" :key="index"  size="small"  @change="pChange">
      <el-popover
        placement="bottom"
        width="700"
        trigger="hover">
          <div class="wrap">
            <el-checkbox-group v-model="CCheck" v-for="(items, key) in item.city_list" :key="key"  size="small" @change="cChange">
              <el-checkbox v-model="items.code" :label="items.label" border class="checkbox"></el-checkbox>
            </el-checkbox-group>
          </div>
        <el-checkbox slot="reference" v-model="item.code" :label="item.label" border class="checkbox"></el-checkbox>
      </el-popover>
    </el-checkbox-group>
  </div>

  <div v-show="pCheck.length" style="display:flex;">
    <div>所选省份：</div>
    <div v-for="(val, i) in pCheck" :key="i">{{val}} </div>
  </div>
  </div>
</template>
<script>
import area from '../area.js'  // 引入地址
export default {
  data() {
    return{
      area: {},
      pCheck: [],
      CCheck: [],
      province_list: [], // 省
      city_list: [], // 城市
    }
  },
  created() {
    console.log(area);
    // 拼装省份
    for (const key in area.province_list) {
      this.province_list.push({
        code: key,
        label: area.province_list[key]
      })
    }

    // 拼装城市
    for (const key in area.city_list) {
      this.city_list.push({
        code: key,
        label: area.city_list[key]
      })
    }

    // 找出省份拥有的城市
    for (const val in this.province_list) {
      let province = this.province_list[val]
      province.city_list = []
      for (const item in this.city_list) {
        let city = this.city_list[item]
        if (province.code.substring(0,1) === '9' && city.code.substring(0,1) === '9') {
          province.city_list.push(city)
        } else {
          if (province.code.substring(0,2) === city.code.substring(0,2)) {
            province.city_list.push(city)
          }
        }
      }
    }

    console.log(this.province_list);
  },
  methods: {
    // 省份选择
    pChange(e) {
      console.log(e, '>>>>>>所选省份');
    },

    // 城市选择
    cChange(e) {
      console.log(e, '>>>>>>所选城市');
    },
  }
}
</script>
<style scoped>
.content {
  width: 80%;
  height: 500px;
  border: solid;
  margin: 0 auto;
  white-space: pre-wrap;
  word-break: break-all;
  overflow: hidden;
  text-align: left;
}
.wrap {
  display:flex;
  flex-wrap:wrap;
}
.checkbox {
  width:180px;
  margin:10px;
}
</style>