前言

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

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

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

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

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

當我到省外的時候，我的回答肯定是：我是XXX省的。

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

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

效果圖

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

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

代碼實現(xiàn)

先安裝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地址欄組件和這個非常類似，我因為這個地方錯覺了，以為是一個，浪費了好多時間。

自帶的是：

//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%' />

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

地址：在這里

area-select 組件

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

事件

這就是今天要分享的內(nèi)容，你學會了嗎？

總結(jié)

到此這篇關(guān)于vue中集成省市區(qū)街四級地址組件實現(xiàn)的文章就介紹到這了,更多相關(guān)vue集成省市區(qū)街四級地址組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！