vue 元件分區域顯示 vue地區選擇元件教程詳解

概述

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

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

demo

搶鮮體驗這裡 demo

apiprops

引數型別

說明area

array

傳入元件的地區的資料

events

事件名引數

說明selected

area

元件中選中的地區

詳細說明

props

area

area 引數是必選項，表示元件初始化時的地區資料，可以為空。 area 是乙個包含多個物件的陣列，其中每個物件的資料結構如下:

area: [,,

因為後來在實際的使用中，發現有時候，後台只會返回乙個地區的 id 值，所以這裡做了優化，可以只傳入 id 的值，比如這樣：

area: [,,

selected

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

簡單的例子

安裝和使用

npm install adc-addressmap

若作為全域性元件使用

//在專案入口檔案

import vue from 'vue'

import addressmap from 'adc-addressmap'

vue.component('addressmap', addressmap)

若作為區域性元件

//在某個元件中

import addressmap from 'adc-addressmap'

export default ,

總結