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

 }
}