使用vue2实现带地区编号和名称的省市县三级联动效果

export default {
 100000: {
 110000: \'北京市\',
 120000: \'天津市\',
 130000: \'河北省\',
 140000: \'山西省\',
 ...
 },
 130000: {
 130100: \'石家庄市\',
 130200: \'唐山市\',
 130300: \'秦皇岛市\',
 130400: \'邯郸市\',
 ...
 },
 130100: {
 130102: \'长安区\',
 130104: \'桥西区\',
 130105: \'新华区\',
 130107: \'井陉矿区\',
 ...
 },
 ...
}

<template>
 <div id=\"app\" class=\"container\">
 <div class=\"demo form-inline\">
  <select name=\"province\" class=\"form-control\" v-model=\"province.code\" @change=\"getCitys\">
   <option value=\"\">选择省份</option>
   <option v-for=\"(item, index) in provinceList\"
    :value=\"index\"
    :key=\"index\">
   {{ item }}
   </option>
  </select>
  <select name=\"city\" class=\"form-control\" v-show=\"showcitys\" v-model=\"city.code\" @change=\"getAreas\">
   <option value=\"\">选择城市</option>
   <option v-for=\"(item, index) in cityList\"
    :value=\"index\"
    :key=\"index\">
   {{ item }}
   </option>
  </select>
  <select name=\"area\" class=\"form-control\" v-show=\"showareas\" v-model=\"area.code\" @change=\"getDistValue\">
   <option value=\"\">选择区县</option>
   <option v-for=\"(item, index) in areaList\"
    :value=\"index\"
    :key=\"index\">
   {{ item }}
   </option>
  </select>
  <button class=\"btn btn-info\" @click=\"getSelectVal\">获取选中值</button>
  <div style=\"margin-top:20px;color:red\">{{selected}}</div>
 </div>
 </div>
</template>

import DISTRICTS from \'./districts\';
const DEFAULT_CODE = 100000;
export default {
 name: \'App\',
 data() {
  return {
   showcitys: false,
   showareas: false,
   selected: \'\',
   defaultProvince: \'湖南省\',
   defaultCity: \'长沙市\',
   defaultArea: \'岳麓区\',
   province: {},
   city: {},
   area: {},
   provinceList: [],
   cityList: [],
   areaList: []
  }
 },
 created() {
  this.provinceList = this.getDistricts();
  this.getDefault();
 },
 
 methods: {
  getDefault() {
   if (this.defaultProvince !== \'\') {
    this.showcitys = true;
    let provinceCode = this.getAreaCode(this.defaultProvince);
    this.cityList = this.getDistricts(provinceCode);
    this.province = {
     code: provinceCode,
     value: this.defaultProvince
    }
   }
   
   if (this.defaultCity !== \'\') {
    this.showareas = true;
    let cityCode = this.getAreaCode(this.defaultCity);
    this.areaList = this.getDistricts(cityCode);
    this.city = {
     code: cityCode,
     value: this.defaultCity
    }
   }
 
   if (this.defaultArea !== \'\') {
    let areaCode = this.getAreaCode(this.defaultArea);
    this.area = {
     code: areaCode,
     value: this.defaultArea
    }
   }
  },
  getSelectVal() {
   this.selected = this.province.value + this.city.value + this.area.value;
   console.log(this.province.code + \'-\'+ this.city.code + \'-\' + this.area.code);
  },
  
  //名称转代码
  nameToCode(name) {
   for(let x in DISTRICTS) {
   for(let y in DISTRICTS[x]) {
    if(name === DISTRICTS[x][y]) {
    return y
    }
   }
   }
  },
  //获取区域代码
  getAreaCode(value) {
   if(typeof value === \'string\') {
   return this.nameToCode(value);
   }

   return value;
  },
  
  getCodeValue(code, level=1) {
   if (level == 1) { //省级
    return DISTRICTS[DEFAULT_CODE][code];
    
   } else if (level == 2) {
    let provinceCode = this.province.code;
    return DISTRICTS[provinceCode][code];
  
   } else { //
    let cityCode = this.city.code;
    return DISTRICTS[cityCode][code];
   }
  },
  getDistricts(code = DEFAULT_CODE) {
   return DISTRICTS[code] || []
  },
  
  cleanList(name) {
   this[name] = []
  },
  getCitys(e) {
   this.cityList = this.getDistricts(e.target.value);

   this.cleanList(\'areas\')
   this.province = this.setData(e.target.value, 1);
   this.areaList = [];
   this.showareas = false;
   this.showcitys = true;
  },
  getAreas (e) {
   this.areaList = this.getDistricts(e.target.value);
   this.city = this.setData(e.target.value, 2);
   this.showareas = true;
  },
  getDistValue (e) {
   this.area = this.setData(e.target.value, 3);
  },
  setData(code, level = 1) {
   code = parseInt(code);
   return {
    code: code,
    value: this.getCodeValue(code, level),
   }
  },

 }
}