So verwenden Sie die Vue-Regionsauswahlkomponente

Dieses Mal zeige ich Ihnen, wie Sie Komponenten zur Auswahl von Vue-Regionen verwenden Vorsichtsmaßnahmen Hier sind praktische Fälle, schauen wir uns das an.

Übersicht

wird hauptsächlich für den Betrieb nationaler Regionaldaten verwendet, einschließlich der dreistufigen Verknüpfung von Provinzen, Städten und Bezirken, dem Hinzufügen und Löschen von Regionaldaten ; Beim Betrieb regionaler Daten haben wir zuvor baumförmige Regionsauswahlkomponenten verwendet, aber da das Rendern beim Betrieb einer großen Menge regionaler Daten langsam war, haben wir zu einer anderen Datenanzeigeform und Interaktionsform gewechselt und so Folgendes erreicht Mit dieser Komponente.

Hinweis: Diese Komponente ist eine vue.js-Komponente

Demo

Bitte klicken Sie hier für eine Early-Access-Demo

API

Requisiten

参数	类型	说明
area	Array	传入组件的地区的数据

Ereignisse

Ereignis

事件名	参数	说明
selected	area	组件中选中的地区

Name

Parameter

Beschreibung

ausgewählter

Bereich

Der in der Komponente ausgewählte Bereich

Detaillierte Beschreibung

Requisiten

Bereich

Bereichsparameter ist erforderlich . Gibt die Regionsdaten an, wenn die Komponente initialisiert wird, und kann leer sein. Bereich ist ein Array, das mehrere Objekte enthält. Die Datenstruktur jedes Objekts ist wie folgt:

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

Da ich später bei der tatsächlichen Verwendung festgestellt habe, dass der Hintergrund manchmal nur eine Bereichs-ID zurückgibt Wert, daher wurde hier eine Optimierung durchgeführt, Sie können nur den ID-Wert übergeben, zum Beispiel:

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

selected

selected ist ein intern von der Komponente veröffentlichtes Ereignis Sie können dieses Ereignis außerhalb der Komponente abonnieren, um den von der Komponente zurückgegebenen Wert zu erhalten. Der zurückgegebene Wert ist ein Array, das aus mehreren Objekten besteht, die Bereichsdaten, Datenstruktur und Bereichsparameter enthalten als

Einfaches Beispiel

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

Installieren Sie und verwenden Sie

npm install adc-addressmap

Bei Verwendung als globale Komponente

//在项目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作为局部组件
//在某个组件中
import Addressmap from 'adc-addressmap'
export default {
...
 components: { Addressmap},
...
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Knoten zum Implementieren der Crawler-Funktion

Zusammenfassung der Methoden zur Optimierung des Vue.js-Codes

So verwenden Sie Koa in Node.js, um die Benutzerauthentifizierung zu implementieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vue-Regionsauswahlkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!