使用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),   }  }, }}