Comment utiliser le composant de sélection de région vue

Cette fois, je vais vous montrer comment utiliser les composants de sélection de région vue et quelles sont les précautions lors de l'utilisation des composants de sélection de région vue. Voici des cas pratiques, jetons un coup d'œil.

Aperçu

est principalement utilisé pour le fonctionnement des données régionales nationales, y compris le couplage à trois niveaux des provinces, des villes et des districts, l'ajout et la suppression de données régionales ; Lors de l'exploitation de données régionales, nous avons déjà utilisé des composants de sélection de région en forme d'arborescence, mais comme le rendu était lent lors de l'exploitation d'une grande quantité de données régionales, nous avons changé pour un autre formulaire d'affichage des données et un autre formulaire d'interaction, obtenant ainsi Avec ce composant.

Remarque : ce composant est un composant vue.js

démo

Veuillez cliquer ici pour une démo à accès anticipé

API

Props

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

Événements

Événement

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

Nom

Paramètres

Description

zone sélectionnée

Zone

La zone sélectionnée dans le composant

Description détaillée

Props

zone

paramètre de zone est obligatoire. Les options, indiquant les données de la région lorsque le composant est initialisé, peuvent être vides. Area est un tableau contenant plusieurs objets. La structure des données de chaque objet est la suivante :

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

Parce que plus tard, en utilisation réelle, j'ai découvert que parfois, l'arrière-plan ne renvoie que l'ID. valeur d'une région, donc l'optimisation a été faite ici, vous ne pouvez transmettre que la valeur de l'ID, par exemple :

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

sélectionné

sélectionné est déterminé par le composant interne Un événement publié. Vous pouvez vous abonner à cet événement en dehors du composant pour obtenir la valeur qu'il renvoie. Cette valeur correspond à toutes les régions actuellement sélectionnées par le composant. La valeur renvoyée est un tableau composé de plusieurs objets contenant des données de région. data La structure est la même que le paramètre de zone

Exemple simple

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

Installation et utilisation

npm install adc-addressmap

Si utilisé comme composant global

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment utiliser le code Yuansheng JS pour implémenter le champ de recherche Baidu

Comment utiliser jQuery.i18n .properties Internationaliser le code JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!