在很多應用中，往往都涉及到記錄用戶所在省份、城市、區縣或者街道等資訊，一般我們可以通過聯動的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）--- 省市區縣聯動處理的組件使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/192042.html
標籤：其他