vue中整合省市區街四級地址元件的實現過程

2022-12-29 14:00:16

前言

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

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

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

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

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

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

在我們專案中也是同樣的道理，有時候只需要選擇省就可以，有時候則需要選擇到市、縣，以至於鄉鎮，甚至哪個村都有可能，不同專案不同的選擇範圍。

許多框架中都會自帶位址列元件，比如我們今天要介紹的jeecg-boot中，但是它自帶的只有三級，也就是到了區的這一級，但是我們專案確是需要到五級，所以我們就不得不改一下。

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

下拉選擇器，可以切換成四個下拉選單級聯，也可以切換成現在這樣的，不同的標籤。

先安裝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);

一定要區分開來，不然沒有效果。

在需要新增的頁面上引入：

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

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

v4 僅支援省市區聯動，即 v4 不再支援 level 的值為 3(省市區街聯動)

事件名	說明	引數
change	選中值發生變化時觸發	目前選擇的值

這就是今天要分享的內容，你學會了嗎？

到此這篇關於vue中整合省市區街四級地址元件實現的文章就介紹到這了,更多相關vue整合省市區街四級地址元件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！