快捷導(dǎo)航

vue中集成省市區(qū)街四級地址組件的實現(xiàn)過程

更新時間：2022年12月29日 11:52:37 作者：穆雄雄

我們在開發(fā)中常會遇到選擇地址的需求,有時候只需要選擇省就可以,有時候則需要選擇到市、縣,以至于鄉(xiāng)鎮(zhèn)，甚至哪個村都有可能,下面這篇文章主要給大家介紹了關(guān)于vue中集成省市區(qū)街四級地址組件的相關(guān)資料,需要的朋友可以參考下

前言

省市區(qū)地址大家應(yīng)該都不陌生吧，網(wǎng)上買個東西，得填地址。中午定個飯，得寫地址；叫個貨拉拉叫個跑腿，是不是也得寫地址。

但是選擇地址的時候，不同場景下選擇的范圍不同，就像出門在外，根據(jù)所處的地域，回答別人“你是哪里的”的話也不一樣。

比如我是山西呂梁柳林縣的，我到了縣城，我的回答是：我是XXX鎮(zhèn)的。

我到了市里，我的回答是：我是XXX縣的。

我到了省城，我的回答則是：我是XXX市的。

當(dāng)我到省外的時候，我的回答肯定是：我是XXX省的。

在我們項目中也是同樣的道理，有時候只需要選擇省就可以，有時候則需要選擇到市、縣，以至于鄉(xiāng)鎮(zhèn)，甚至哪個村都有可能，不同項目不同的選擇范圍。

許多框架中都會自帶地址欄組件，比如我們今天要介紹的jeecg-boot中，但是它自帶的只有三級，也就是到了區(qū)的這一級，但是我們項目確是需要到五級，所以我們就不得不改一下。

首先我們可以先來看看效果圖：

下拉選擇器，可以切換成四個下拉列表級聯(lián)，也可以切換成現(xiàn)在這樣的，不同的標(biāo)簽。

先安裝area-linkage-vue的依賴，命令如下：

npm i --save vue-area-linkage area-data

在main.js中引入：

import { pca, pcaa } from 'area-data'; // v5 or higher
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

這個地方需要注意，由于自帶的jeecg-boot地址欄組件和這個非常類似，我因為這個地方錯覺了，以為是一個，浪費(fèi)了好多時間。

自帶的是：

//jeecg-boot原生的
import VueAreaLinkage from 'vue-area-linkage';
//jeecg原生的
Vue.use(VueAreaLinkage);

一定要區(qū)分開來，不然沒有效果。

在需要添加的頁面上引入：

  import { pcaa } from 'area-data-vue'

在data中寫：

  pcaaData:pcaa,

在templete中寫組件：

<area-cascader v-model='model.administrative' :data='pcaaData' :level='2' type='text' style='width: 100%' />

下面是來自官方的屬性介紹：

參數(shù)	類型	可選值	默認(rèn)值	說明
type	String	all/code/text	code	設(shè)置返回的數(shù)據(jù)格式
placeholders	Array	-	[]	設(shè)置 placeholder text
level	Number	0/1/2	1	設(shè)置聯(lián)動層級(0-只選省份/1-省市聯(lián)動/2-省市區(qū)聯(lián)動)
size	String	small/medium/large	medium	設(shè)置輸入框的大小
disabled	Boolean	-	false	是否禁用
data	Object	-	-	地區(qū)數(shù)據(jù)(v5需要傳入)
icon	String	-	area-select-icon	自定義下拉小圖標(biāo)
disableLinkage	Boolean	-	true	地區(qū)選擇是否進(jìn)行聯(lián)動

v4 僅支持省市區(qū)聯(lián)動，即 v4 不再支持 level 的值為 3(省市區(qū)街聯(lián)動)

參數(shù)	類型	可選值	默認(rèn)值	說明
type	String	all/code/text	code	設(shè)置返回的數(shù)據(jù)格式
placeholder	String	-	‘’	設(shè)置 placeholder text
level	Number	0/1	0	設(shè)置聯(lián)動層級(0-省市聯(lián)動/1-省市區(qū)聯(lián)動)
size	String	small/medium/large	medium	設(shè)置輸入框的大小
separator	String	-	‘-’	顯示選中文本的分隔符
disabled	Boolean	-	false	是否禁用
data	Object	-	-	地區(qū)數(shù)據(jù)(v5需要傳入)