概述

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

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

demo

搶鮮體驗請點擊這里 demo

API

Props

Events

詳細說明

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 參數一樣

簡單的例子

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

安裝和使用

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地區選擇組件教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！