vue地區(qū)選擇組件教程詳解
概述
主要用于全國地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級聯(lián)動，地區(qū)數(shù)據(jù)的添加和刪除； 在操作地區(qū)數(shù)據(jù)時，以前也用過樹形的地區(qū)選擇組件，但因其在再操作大量的地區(qū)數(shù)據(jù)時，渲染緩慢，所以我們就換了另一種數(shù)據(jù)展示形式和交互形式，從而就有了這個組件。
注意：該組件是 vue.js 組件
demo
搶鮮體驗請點擊這里 demo
API
Props
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| area | Array | 傳入組件的地區(qū)的數(shù)據(jù) |
Events
| 事件名 | 參數(shù) | 說明 |
|---|---|---|
| selected | area | 組件中選中的地區(qū) |
詳細(xì)說明
Props
area
area 參數(shù)是必選項，表示組件初始化時的地區(qū)數(shù)據(jù)，可以為空。 area 是一個包含多個對象的數(shù)組，其中每個對象的數(shù)據(jù)結(jié)構(gòu)如下:
...
area: [
{Name: '北京', ID: '01'},
{Name: '南京', ID: '0401'},
{Name: '西湖區(qū)', ID: '060105'}
],
...
因為后來在實際的使用中，發(fā)現(xiàn)有時候，后臺只會返回一個地區(qū)的 ID 值，所以這里做了優(yōu)化，可以只傳入 ID 的值，比如這樣：
...
area: [
{ID: '01'},
{ID: '0401'},
{ID: '060105'}
],
...
selected
selected 是由組件內(nèi)部發(fā)布的一個事件，你可以在組件外面訂閱這個事件，從而得到它返回的值，這個值就是組件當(dāng)前選中的所有的地區(qū)，返回的這個值是由多個包含地區(qū)數(shù)據(jù)的對象組成的數(shù)組，數(shù)據(jù)結(jié)構(gòu)和 area 參數(shù)一樣
簡單的例子
<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},
...
}
總結(jié)
以上所述是小編給大家介紹的vue地區(qū)選擇組件教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue項目使用axios封裝request請求，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
項目中需要使用websocke，這個是我自己修修改改好多次之后用得最順手的一版，分享一下。這個封裝需要搭配vuex使用，因為收到的數(shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題2022-09-09
vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了基于Vue實現(xiàn)圖書管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
ref是Vue3中一個非常重要的功能,它可以用來獲取DOM節(jié)點,從而實現(xiàn)對DOM節(jié)點的操作,下面這篇文章主要給大家介紹了關(guān)于vue3中獲取dom元素和操作實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
AntV?組織圖操作完畢以后，需要點擊按鈕將畫布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇Vue中對拿到的數(shù)據(jù)進行A-Z排序的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue應(yīng)用中504錯誤（Gateway timeout）的原因與解決方法
在Vue前端應(yīng)用中遇到504代理錯誤通常是由于請求在到達服務(wù)器之前超時,504錯誤表示網(wǎng)關(guān)超時,可能由后端服務(wù)響應(yīng)慢、網(wǎng)絡(luò)問題、代理配置錯誤、請求負(fù)載過大、前端請求超時設(shè)置不當(dāng)、服務(wù)器資源不足或第三方服務(wù)問題引起2024-09-09
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue實現(xiàn)點擊關(guān)注后及時更新列表功能
這篇文章主要介紹了vue實現(xiàn)點擊關(guān)注后及時更新列表功能，本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06