我們知道省市區縣都有名稱和對應的數字唯一編號，使用編號可以更方便查詢以及程序處理，我們今天來了解一下使用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()部分設置變量。最后把