vue 世界城市下拉模拟组件

 1.引入AddresJson.js城市数据文件

<template>
  <div>
  <div style="text-align:center;margin-bottom:10px;">
      <el-link type="primary" v-show="obj.GlobalRegionName">{{obj.GlobalRegionName}}</el-link>
      <el-link type="success" v-show="obj.CountryName">{{obj.CountryName}}</el-link>
      <el-link type="warning" v-show="obj.ProvinceName">{{obj.ProvinceName}}</el-link>
      <el-link type="danger" v-show="obj.UrbanCountyName">{{obj.UrbanCountyName}}</el-link>
      <el-link type="info" v-show="obj.CountyTownName">{{obj.CountyTownName}}</el-link>

  </div>
    <el-select v-model="GlobalRegionId" placeholder="请选择区域" @change="SelectGlobalRegionFn()" data-id="1"> 
        <el-option
          v-for="item in AddresData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :path="item.path"
          :level="item.level">
           <span style="float: left">{{ item.name }}</span>
           <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name_en }}</span>
        </el-option>
  </el-select>
  <el-select v-model="CountryId" :disabled="CountryState" placeholder="请选择国家" @change="SelectCountryFn()" data-id="2">
        <el-option
          v-for="item in Country"
          :key="item.id"
          :label="item.name"
          :value="item.id">
           <span style="float: left">{{ item.name }}</span>
           <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name_en }}</span>
        </el-option>
  </el-select>
  <el-select v-model="ProvinceId" :disabled="ProvinceState" placeholder="请选择省份" @change="SelectProvinceFn()" data-id="3">
        <el-option
          v-for="item in Province"
          :key="item.id"
          :label="item.name"
          :value="item.id">
           <span style="float: left">{{ item.name }}</span>
           <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name_en }}</span>
        </el-option>
  </el-select>
  <el-select v-model="UrbanCountyId" :disabled="UrbanCountyState" placeholder="请选择市区" @change="SelectUrbanCountyFn()" v-show="UrbanCountyShow" data-id="4">
        <el-option
          v-for="item in UrbanCounty"
          :key="item.id"
          :label="item.name"
          :value="item.id">
           <span style="float: left">{{ item.name }}</span>
           <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name_en }}</span>
        </el-option>
  </el-select>
  <el-select v-model="CountyTownId" :disabled="CountyTownState" placeholder="请选择县" v-show="CountyTownShow" @change="SelectCountyTownFn()" data-id="5">
        <el-option
          v-for="item in CountyTown"
          :key="item.id"
          :label="item.name"
          :value="item.id">
           <span style="float: left">{{ item.name }}</span>
           <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name_en }}</span>
        </el-option>
  </el-select>

  </div>
</template>

<script>
import AddresData from '../lib/AddresJson';
import ObjectAddressn from '../lib/common';
export default {
  name: 'Demo',
  data () {
    return {
       AddresData,
       GlobalRegionId:"",
       CountryId:"",
       ProvinceId:"",
       UrbanCountyId:"",
       CountyTownId:"",
       Province:[],
       Country:[],
       UrbanCounty:[],
       CountyTown:[],
       CountryState:true,
       ProvinceState:true,
       UrbanCountyState:true,
       CountyTownState:true,
       UrbanCountyShow:true,
       CountyTownShow:true,
       obj:{}
    }
  },
  methods:{
    SelectGlobalRegionFn(){
       let _this=this;
       _this.CountryId="";
       _this.ProvinceId="";
       _this.UrbanCountyId="";
       _this.CountyTownId="";
       _this.Province=[];
       _this.Country=[];
       _this.CountyTown=[];
       _this.UrbanCounty=[];
       _this.obj={};
       const AddresData=new ObjectAddressn(_this.GlobalRegionId,_this.AddresData);
       _this.Country=AddresData.Arr;
       _this.obj.GlobalRegionName=AddresData.Name;
       _this.CountryState=AddresData.State;

    },
    SelectCountryFn(){
        let _this=this;
        _this.ProvinceId="";
        _this.Province=[];
        _this.UrbanCountyId="";
        _this.UrbanCounty=[];
       const AddresData=new ObjectAddressn(_this.CountryId,_this.Country);
       _this.Province=AddresData.Arr;
       _this.obj.CountryName=AddresData.Name;
       _this.ProvinceState=AddresData.State;
       
    },
    SelectProvinceFn(){
        let _this=this;
        _this.UrbanCountyId="";
        _this.UrbanCounty=[];
        _this.CountyTownId="";
        _this.CountyTown=[];
        const AddresData=new ObjectAddressn(_this.ProvinceId,_this.Province);
       _this.UrbanCounty=AddresData.Arr;
       _this.obj.ProvinceName=AddresData.Name;
       _this.UrbanCountyState=AddresData.State;
       _this.UrbanCountyShow=AddresData.Show;
       _this.CountyTownShow=AddresData.Show;
    },
    SelectUrbanCountyFn(){
        let _this=this;
        _this.CountyTownId="";
        _this.CountyTown=[];
        const AddresData=new ObjectAddressn(_this.UrbanCountyId,_this.UrbanCounty);
        _this.CountyTown=AddresData.Arr;
        _this.obj.UrbanCountyName=AddresData.Name;
        _this.CountyTownState=AddresData.State;
        _this.CountyTownShow=AddresData.Show;
    }, 
    SelectCountyTownFn(){
         let _this=this;
         debugger
        const AddresData=new ObjectAddressn(_this.CountyTownId,_this.CountyTown);
        _this.obj.CountyTownName=AddresData.Name;
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

 2.简单封装获取数据 

import AddresData from '../lib/AddresJson'
class ObjectAddress {
    constructor(id, arrOBJ) {
        this.id = id;
        this.arrOBJ = arrOBJ;
        this.Arr = [];
        this.State = true;
        this.Show = true;
        this.Name = "";
        this.init();
    }
    init() {
        if (this.id != "") {
            let _this = this;
            debugger
            _this.arrOBJ.forEach(a => {
                if (a.id == _this.id) {
                    _this.Name = a.name;
                    a.childrens.forEach(b => {
                        _this.Arr.push(b)
                    });
                }
            });

            if (_this.Arr.length == 0) {
                this.State = true;
                this.Show = false;
            } else {
                this.State = false;
                this.Show = true;
            }
        }
    }

}
export default ObjectAddress

3.展示效果