小編給大家分享一下怎么使用vue2實(shí)現(xiàn)帶地區(qū)編號(hào)和名稱(chēng)的省市縣三級(jí)聯(lián)動(dòng)效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到銅陵網(wǎng)站設(shè)計(jì)與銅陵網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋銅陵地區(qū)。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪(fǎng)問(wèn)速度和用戶(hù)體驗(yàn)。

準(zhǔn)備數(shù)據(jù)源

我們的省市區(qū)縣的數(shù)據(jù)源來(lái)自本站文章 《基于Vue2的簡(jiǎn)易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件》 中的districts.js，感謝 v-distpicker 作者。districts.js中的數(shù)據(jù)格式大概是這樣的：

export default {
 100000: {
 110000: '北京市',
 120000: '天津市',
 130000: '河北省',
 140000: '山西省',
 ...
 },
 130000: {
 130100: '石家莊市',
 130200: '唐山市',
 130300: '秦皇島市',
 130400: '邯鄲市',
 ...
 },
 130100: {
 130102: '長(zhǎng)安區(qū)',
 130104: '橋西區(qū)',
 130105: '新華區(qū)',
 130107: '井陘礦區(qū)',
 ...
 },
 ...
}

很顯然，districts.js導(dǎo)出的是一個(gè)key:value形式的json數(shù)據(jù)串，那么在js中我們就可以很方便的處理json數(shù)據(jù)串中的關(guān)系。

構(gòu)建項(xiàng)目

我們使用vue-cli構(gòu)建項(xiàng)目，需要安裝node和vue環(huán)境。然后命令行運(yùn)行： vue init webpack distpicker 構(gòu)建好項(xiàng)目工程。具體如何操作的請(qǐng)參照vue官網(wǎng)，這些基礎(chǔ)的本文不細(xì)講。

現(xiàn)在我們直接編輯App.vue文件。

這是一個(gè)簡(jiǎn)單三個(gè)下拉選擇器模板，使用 v-model 可以設(shè)置默認(rèn)值， @change 當(dāng)下拉選擇選項(xiàng)后觸發(fā)的事件。然后每個(gè) select 下的 option 是讀取districts.js對(duì)應(yīng)的數(shù)據(jù)。

JS代碼

我們現(xiàn)在來(lái)看JS部分，首先使用import導(dǎo)入省市區(qū)縣數(shù)據(jù)，注意我們把districts.js文件放在項(xiàng)目的src目錄下，然后定義默認(rèn)編號(hào)100000，因?yàn)槲覀兊谝粋€(gè)（省級(jí)）選擇框默認(rèn)要下拉顯示所有的省/自治區(qū)/直轄市。然后在 data()部分設(shè)置變量。最后把 created() 和 methods 部分的代碼加上，完整的代碼如下：

import DISTRICTS from './districts';
const DEFAULT_CODE = 100000;
export default {
 name: 'App',
 data() {
  return {
   showcitys: false,
   showareas: false,
   selected: '',
   defaultProvince: '湖南省',
   defaultCity: '長(zhǎng)沙市',
   defaultArea: '岳麓區(qū)',
   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);
  },
  
  //名稱(chēng)轉(zhuǎn)代碼
  nameToCode(name) {
   for(let x in DISTRICTS) {
   for(let y in DISTRICTS[x]) {
    if(name === DISTRICTS[x][y]) {
    return y
    }
   }
   }
  },
  //獲取區(qū)域代碼
  getAreaCode(value) {
   if(typeof value === 'string') {
   return this.nameToCode(value);
   }

   return value;
  },
  
  getCodeValue(code, level=1) {
   if (level == 1) { //省級(jí)
    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),
   }
  },

 }
}

運(yùn)行

我們需要實(shí)現(xiàn)的效果是：默認(rèn)顯示省級(jí)下拉選擇框，下拉選項(xiàng)中應(yīng)該默認(rèn)載入省級(jí)名稱(chēng)，然后當(dāng)選擇省級(jí)下拉框中的省份列表（省級(jí)）選項(xiàng)時(shí)，顯示選中省份的城市列表（市級(jí)），然后選擇市級(jí)城市選項(xiàng)，顯示選擇城市的區(qū)縣列表（縣級(jí)）。在選擇完每個(gè)選項(xiàng)時(shí)，我們應(yīng)該即時(shí)記錄選項(xiàng)對(duì)應(yīng)的編號(hào)和名稱(chēng)。如果在 data() 部分設(shè)置了省市區(qū)縣的默認(rèn)值，則三個(gè)下拉框都要顯示。

運(yùn)行 npm run dev ，在瀏覽器中輸入http://localhost:8080查看效果。

效果是實(shí)現(xiàn)了，但是如果要在一個(gè)頁(yè)面調(diào)用多個(gè)三級(jí)聯(lián)動(dòng)效果則就比較尷尬了，下節(jié)我給大家講述如何把這個(gè)三級(jí)聯(lián)動(dòng)效果封裝成vue組件，造好輪子，方便在更多地方調(diào)用，敬請(qǐng)關(guān)注。

看完了這篇文章，相信你對(duì)“怎么使用vue2實(shí)現(xiàn)帶地區(qū)編號(hào)和名稱(chēng)的省市縣三級(jí)聯(lián)動(dòng)效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前名稱(chēng)：怎么使用vue2實(shí)現(xiàn)帶地區(qū)編號(hào)和名稱(chēng)的省市縣三級(jí)聯(lián)動(dòng)效果
標(biāo)題URL：http://weahome.cn/article/gihsho.html