如何使用vue地區選擇元件

這次帶給大家如何使用vue地區選擇組件，使用vue地區選擇組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

概述

主要用於全國地區資料的操作，包括省，市，區三級連動，地區資料的新增和刪除 ； 在操作地區資料時，以前也用過樹形的地區選擇元件，但因其在再操作大量的地區資料時，渲染緩慢，所以我們就換了另一種資料展示形式和互動形式，從而就有了這個組件。

注意：該元件是vue.js 元件

#demo

搶鮮體驗請點擊這裡demo

API

Props

#參數		說明
area	Array	#傳入元件的地區的資料

# #Events

#參數selected詳細說明

事件名稱	##說明
area	#元件中選取的地區

Props

area

area 參數是必選項，表示元件初始化時的地區數據，可以為空。 area 是一個包含多個物件的

陣列

，其中每個物件的資料結構如下:

...
area: [
 {Name: '北京', ID: '01'},
 {Name: '南京', ID: '0401'},
 {Name: '西湖区', ID: '060105'}
],
...

因為後來在實際的使用中，發現有時候，後台只會傳回一個地區的ID 值，所以這裡做了最佳化，可以只傳入ID 的值，像這樣：

...
area: [
 {ID: '01'},
 {ID: '0401'},
 {ID: '060105'}
],
...

#selected

selected 是由元件內部發布的事件，你可以在元件外面訂閱這個事件，從而得到它傳回的值，這個值就是元件目前選取的所有的地區，傳回的這個值是由多個包含地區資料的物件組成的數組，資料結構和area 參數一樣

簡單的範例

<p>
  <addressmap :area="area" @selected="selected"></addressmap>
</p>

#安裝和使用##npm install adc -addressmap

若作為全域元件使用

//在项目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作为局部组件
//在某个组件中
import Addressmap from 'adc-addressmap'
export default {
...
 components: { Addressmap},
...
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何用node實作爬蟲功能

#優化Vue.js程式碼方法總結

如何使用Node.js中Koa實作使用者認證

#

以上是如何使用vue地區選擇元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！