如何使用vue地區選擇元件

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

概述

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

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

#demo

搶鮮體驗請點擊這裡demo

API

Props

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

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

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

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

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

如何用node實作爬蟲功能

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

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

#

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