Ausführliche Erläuterung des Tutorials zur Auswahl der Vue-Regionskomponente

In diesem Artikel wird hauptsächlich die Vue-Regionsauswahlkomponente vorgestellt, die hauptsächlich für den Betrieb nationaler Regionaldaten verwendet wird, einschließlich der dreistufigen Verknüpfung von Provinzen, Städten und Bezirken sowie des Hinzufügens und Löschens regionaler Daten Bei der Einführung des detaillierten Tutorials der Vue-Regionsauswahlkomponente können sich bedürftige Freunde darauf beziehen.

Ü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 regionaler Daten und dem Löschen. Bei der Verarbeitung regionaler Daten haben wir zuvor baumförmige Regionsauswahlkomponenten verwendet, da die Darstellung jedoch bei der Verarbeitung großer Mengen regionaler Daten langsam war Wir haben also zu einem anderen Datenanzeigeformular und Interaktionsformular gewechselt Es gibt diese Komponente.

Hinweis: Diese Komponente ist eine vue.js-Komponente

Demo

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

API

Requisiten

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

Veranstaltungen

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

Details

Props

Bereich

Der Flächenparameter ist erforderlich und stellt den Bereich dar, in dem sich die Komponente befindet initialisiert. Daten, können leer sein. Bereich ist ein Array mit mehreren Objekten, wobei die Datenstruktur jedes Objekts wie folgt lautet:

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

Weil ich später bei der tatsächlichen Verwendung manchmal festgestellt habe, dass The Hintergrund gibt nur den ID-Wert einer Region zurück, daher wurde hier eine Optimierung vorgenommen, um nur die Übergabe des ID-Werts zu ermöglichen, zum Beispiel:

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

ausgewählt

ausgewählt ist ein intern von der Komponente veröffentlichtes Ereignis. Sie können dieses Ereignis außerhalb der Komponente abonnieren, um den von ihm zurückgegebenen Wert zu erhalten . Der zurückgegebene Wert ist ein Array, das aus mehreren Objekten besteht, die regionale Daten enthalten. Die Datenstruktur ist dieselbe wie der Bereichsparameter

rrree

Installation und Verwendung

npm install adc-addressmapBei Verwendung als globale Komponente

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Tutorials zur Auswahl der Vue-Regionskomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!