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

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

Vue的優(yōu)點

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

準備數(shù)據源

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

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

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

構建項目

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

現(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 可以設置默認值， @change 當下拉選擇選項后觸發(fā)的事件。然后每個 select 下的 option 是讀取districts.js對應的數(shù)據。

JS代碼

我們現(xiàn)在來看JS部分，首先使用import導入省市區(qū)縣數(shù)據，注意我們把districts.js文件放在項目的src目錄下，然后定義默認編號100000，因為我們第一個（省級）選擇框默認要下拉顯示所有的省/自治區(qū)/直轄市。然后在 data()部分設置變量。最后把 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);
  },
  
  //名稱轉代碼
  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)的效果是：默認顯示省級下拉選擇框，下拉選項中應該默認載入省級名稱，然后當選擇省級下拉框中的省份列表（省級）選項時，顯示選中省份的城市列表（市級），然后選擇市級城市選項，顯示選擇城市的區(qū)縣列表（縣級）。在選擇完每個選項時，我們應該即時記錄選項對應的編號和名稱。如果在 data() 部分設置了省市區(qū)縣的默認值，則三個下拉框都要顯示。

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

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

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

文章題目：怎么使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
本文來源：http://aaarwkj.com/article40/gihsho.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、企業(yè)網站制作、做網站、網站改版、、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)