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},
...
}

#######

以上是vue地區選擇組件教學詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！