怎么使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果

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

Vue的優(yōu)點

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

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

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

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

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

構(gòu)建項目

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

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

<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="">選擇區(qū)縣</option>
   <option v-for="(item, index) in areaList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <button class="btn btn-info" @click="getSelectVal">獲取選中值</button>
  <div >{{selected}}</div>
 </div>
 </div>
</template>

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

JS代碼

我們現(xiàn)在來看JS部分，首先使用import導(dǎo)入省市區(qū)縣數(shù)據(jù)，注意我們把districts.js文件放在項目的src目錄下，然后定義默認(rèn)編號100000，因為我們第一個（省級）選擇框默認(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: '長沙市',
   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);
  },
  
  //名稱轉(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) { //省級
    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),
   }
  },

 }
}

運行

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

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

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

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