在很多應用中，往往都涉及到記錄使用者所在省份、城市、區縣或者街道等資訊，一般我們可以通過聯動的Select或者類似的介面元件進行展示，或者使用Element中的el-cascader介面元件進行展示，而全國的省份、城市、區縣或者街道等資訊我們可以通過官方的資料進行獲取，可以直接存放在JS裡面，也可以儲存在自己的資料庫裡面，最後統一進行聯動展示即可。本篇隨筆介紹幾種元件對省市區縣聯動處理的效果及做法，可以直接應用在我們專案中，也可以做為一個元件開發的參考學習。

1、基於element-china-area-data 第三方元件的使用

在github往往有很多我們需要的開源元件，我們可以拿來直接使用，如這個地址是：https://github.com/Plortinus/element-china-area-data ，在Vue+Element的專案中，直接通過npm進行安裝元件即可：

npm install element-china-area-data -S

然後在頁面元件中引入物件資料，繫結在el-cascader介面元件即可。

import { provinceAndCityData, regionData, rovinceAndCityDataPlus, regionDataPlus,  CodeToText, TextToCode } from 'element-china-area-data';

例如介面程式碼如下所示。

    <div class="three">
      <span class="imp">3. 三級聯動（不帶“全部”選項）</span>
      <el-cascader
        v-model="selectedOptions2"
        class="long"
        size="large"
        :options="regionData"
        @change="handleChange"
      />
    </div>

    <div class="bind">
      <div>繫結值：{{ selectedOptions2 }}</div>
      <div>區域碼轉漢字：{{ CodeToText[selectedOptions2[0]] }},{{ CodeToText[selectedOptions2[1]] }},{{ CodeToText[selectedOptions2[2]] }}</div>
      <div>漢字轉區域碼：{{ convertTextToCode(CodeToText[selectedOptions2[0]], CodeToText[selectedOptions2[1]], CodeToText[selectedOptions2[2]]) }}</div>
    </div>

其中資料selectedOptions2格式如下所示

selectedOptions2: ['120000', '120100', '120101'],

而選中資料後，獲得的資料格式同樣是一個數組集合，如下所示

 幾種介面元件的效果如下所示。

 省市區三級聯動的案例Demo程式碼如下。

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

2、基於v-region控制元件省市區街道選擇元件

除了上面的 element-china-area-data 第三方元件，還有一個v-region的省市區街道的元件也做的不錯，地址是：https://github.com/TerryZ/v-region 。

它的主要特點是支援 “省/直轄市”、“市”、“區/縣”、“鄉/鎮/街道” 4級行政區域選擇，可以選擇Select的方式，或者分組方式展示，功能比較多樣化一些。

或者

這個v-region已經封裝為元件進行使用，所以使用上更加簡化一些，如下簡單的介面宣告即可使用。

  <h3>常規表單下拉選擇元素模式</h3>
  <p>Regular form element with select tag</p>
  <v-region :town="true"></v-region>

街道可以包含，也可以省略，如果省略就是省市區縣的三級選擇了。這個元件的幾種用法如下所示。

   <span class="imp">基於v-region控制元件省市區街道選擇元件</span>
    <div class="vregion">
      <h3>常規表單下拉選擇元素模式</h3>
      <v-region v-model="selectedRegion" :town="true" @values="regionChange" />
      <br><br>

      <h3>多分組切換模式</h3>
      <v-region
        v-model="modelGroup"
        :town="true"
        type="group"
        @values="regionChange"
      />

      <br><br><br>
      <h3>多列豎排模式</h3>
      <p>Column group</p>
      <v-region type="column" @values="regionChange" />

      <br><br><br>
      <h3>城市選擇器</h3>
      <p>City picker</p>
      <v-region type="city" :city-picker="true" @values="regionChange" />
    </div>

這個元件如果是省市區縣街道模式的話，需要設定初始化值就是一個物件的格式，如下所示。

      selectedRegion: {
        province: '350000',
        city: '350100',
        area: '350104',
        town: '350104008'
      }

例如，我在一個業務表的案例介面中，就涉及到了省市區街道的選擇處理，就是採用了這個v-region的元件進行展示處理的。介面效果如下所示。

如果是新建窗體的時候，我們可以指定元件的預設值，如下的資料格式

selectedRegion: { province: '440000', city: '440100', area: '440111', town: '440111010' },

另外，我們一般需要在資料庫裡面儲存對應的省市區縣的資料，以便查詢或者其他需要，那麼我們就需要在選擇資料變化的時候，設定一下對應的屬性欄位，如下所示。

    // 修改編輯窗體的省市區街道
    changeEditRegion(data) {
      console.log(data)
      if (data) {
        this.editForm.province = data.province ? data.province.key : '';
        this.editForm.city = data.city ? data.city.key : '';
        this.editForm.district = data.area ? data.area.key : '';
        this.editForm.street = data.town ? data.town.key : '';
        // console.log(this.editForm)
      }
    },

而在展示對話方塊的時候，我們則可以組合省市區資料，作為v-region元件的初始化值，如下程式碼使用。

3、自定義省市區的元件

一般情況上，使用上面的方式就能解決問題了，不過這裡介紹另外一種思路，就是基於資料庫資料的方式進行省市區聯動的處理。

以前我在開發系統的時候，引入了省市區的資料，儲存在幾個資料庫表裡面，然後通過介面的方式檢索省市區及處理器聯動過程。

那麼在基於這些資料的基礎上，我們也可以這樣處理的。

首先我們建立省、市、區縣的表，並在後端釋出對應的API介面，如我的ABP後端介面展示。

  然後在根據這些介面，構建好對應的API客戶端，再在介面引入使用，通過定義自定義元件的方式來整合使用則更加簡單。

 在定義一個自定義元件my-citypicker，元件程式碼如下所示。

<!--用來演示聯動的案例-->
<template>
  <div class="flex-container">
    <div class="flex-item">
      <label>省</label>
      <el-select v-model="provinceValue" placeholder="請選擇省" @change="chooseProvince">
        <el-option
          v-for="item in provinceData"
          :key="item.id"
          :label="item.provinceName"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="flex-item">
      <label>市</label>
      <el-select v-model="cityValue" placeholder="請選擇市" @change="chooseCity">
        <el-option
          v-for="item in cityData"
          :key="item.id"
          :label="item.cityName"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="flex-item">
      <label>區、縣</label>
      <el-select v-model="areaValue" placeholder="請選擇區、縣" @change="chooseArea">
        <el-option
          v-for="item in areaData"
          :key="item.id"
          :label="item.districtName"
          :value="item.id"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
// 匯入Axios的HTTP請求處理封裝類
import { Province, City, District } from '@/api/city'

export default {
  data() {
    return {
      provinceValue: '',
      cityValue: '',
      areaValue: '',

      provinceData: [],
      cityData: [],
      areaData: []
    }
  },
  created() {
    Province.GetAll().then(res => {
      if (res.result) {
        this.provinceData = res.result.items
        // console.log(res.result);
      }
    }).catch(e => {
      this.$message.error('網路連線超時');
    })
  },
  methods: {
    chooseProvince(value) {
      this.cityValue = '';
      this.areaValue = '';
      this.cityData = [];
      this.areaData = [];

      var data = { ProvinceID: value };
      City.GetAll(data).then(res => {
        if (res.result) {
          this.cityData = res.result.items
        }
      }).catch(e => {
        this.$message.error('網路連線超時');
      })
    },
    chooseCity(value) {
      this.areaValue = '';

      var data = { CityID: value };
      District.GetAll(data).then(res => {
        if (res.result) {
          this.areaData = res.result.items
        }
      }).catch(e => {
        this.$message.error('網路連線超時');
      })
    },
    chooseArea() {

    }
  }
}
</script>

<style>
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  padding: 5px;
  height: auto;
  color: tomato;
  font-weight: bold;
  text-align: center;
}
</style>

一樣可以實現省市區縣的聯動處理

以上就是幾種VUE+Element 前端應用中，關於省市區縣聯動處理的元件使用的案例分析，希望大家在借鑑使用別人元件的基礎上，也豐富自己的元件處理，畢竟Vue賦予我們強大的元件定製能力。 

 循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備工作

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取後端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 介面元件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹列表元件的使用

循序漸進VUE+Element 前端應用開發(9）--- 介面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10）--- 基於vue-echarts處理各種圖表展示 

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登入處理

循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP後端介面實現前端介面展示

循序漸進VUE+Element 前端應用開發(15）--- 使用者管理模組的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模組的處理 

循序漸進VUE+Element 前端應用開發(17）--- 選單管理

循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及許可權控制  

循序漸進VUE+Element 前端應用開發(19）--- 後端查詢介面和Vue前端的整合

循序漸進VUE+Element 前端應用開發(20）--- 使用元件封裝簡化介面程式碼  

循序漸進VUE+Element 前端應用開發(21）--- 省市區縣聯動處理的元件使用