溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
概述
主要用于全國地區數據的操作，包括省，市，區三級聯動，地區數據的添加和刪除； 在操作地區數據時，以前也用過樹形的地區選擇組件，但因其在再操作大量的地區數據時，渲染緩慢，所以我們就換了另一種數據展示形式和交互形式，從而就有了這個組件。
注意：該組件是 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 參數一樣
簡單的例子
<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地區選擇組件教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
