使用vue2實現帶地區編號和名稱的省市縣三級聯動效果

來源：懂視網責編：小采時間：2020-11-27 22:04:28

使用vue2實現帶地區編號和名稱的省市縣三級聯動效果

使用vue2實現帶地區編號和名稱的省市縣三級聯動效果:我們知道省市區縣都有名稱和對應的數字唯一編號，使用編號可以更方便查詢以及程序處理，我們今天來了解一下使用vue2來實現常見的省市區下拉聯動選擇效果。準備數據源我們的省市區縣的數據源來自本站文章《基于Vue2的簡易的省市區縣三級聯動組件》中的d

推薦度：

點擊下載本文 文檔為doc格式

導讀使用vue2實現帶地區編號和名稱的省市縣三級聯動效果:我們知道省市區縣都有名稱和對應的數字唯一編號，使用編號可以更方便查詢以及程序處理，我們今天來了解一下使用vue2來實現常見的省市區下拉聯動選擇效果。準備數據源我們的省市區縣的數據源來自本站文章《基于Vue2的簡易的省市區縣三級聯動組件》中的d

我們知道省市區縣都有名稱和對應的數字唯一編號，使用編號可以更方便查詢以及程序處理，我們今天來了解一下使用vue2來實現常見的省市區下拉聯動選擇效果。

準備數據源

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

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

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

構建項目

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

現在我們直接編輯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="">選擇區縣</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>

這是一個簡單三個下拉選擇器模板，使用 v-model 可以設置默認值， @change 當下拉選擇選項后觸發的事件。然后每個 select 下的 option 是讀取districts.js對應的數據。

JS代碼

我們現在來看JS部分，首先使用import導入省市區縣數據，注意我們把districts.js文件放在項目的src目錄下，然后定義默認編號100000，因為我們第一個（省級）選擇框默認要下拉顯示所有的省/自治區/直轄市。然后在 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: '岳麓區',
 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),
 }
 },

 }
}

運行

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

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

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

總結

以上所述是小編給大家介紹的使用vue2實現帶地區編號和名稱的省市縣三級聯動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com