Explication détaillée du didacticiel du composant de sélection de région de vue

Cet article présente principalement le composant de sélection de région vue, qui 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, ainsi que l'ajout et la suppression de données régionales. lors de l'introduction du didacticiel détaillé du composant de sélection de région vue. , les amis dans le besoin peuvent s'y référer

Aperçu

est principalement utilisé pour le fonctionnement des données régionales nationales, y compris la liaison à trois niveaux des provinces, des villes et des districts, l'ajout de données régionales et la suppression ; 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 parce que le rendu était lent lors de l'exploitation d'une grande quantité de données régionales. , nous sommes passés à un autre formulaire d'affichage de données et un autre formulaire d'interaction, il y a donc ce composant.

Remarque : ce composant est un composant vue.js

démo

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

API

Accessoires

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

Événements

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

Détails

Props

zone

le paramètre zone est requis et représente la zone lorsque le composant est initialisé. Les données peuvent être vides. Area est un tableau contenant plusieurs objets, où la structure de données de chaque objet est la suivante :

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

Parce que plus tard, lors de l'utilisation réelle, il a été constaté que Pour le moment, l'arrière-plan ne renverra que la valeur ID d'une région. Une optimisation a donc été effectuée ici pour permettre uniquement la transmission de la valeur ID, par exemple :

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

selected

selected est un événement publié à l'intérieur du composant Vous pouvez vous abonner à cet événement en dehors du composant pour obtenir la valeur qu'il renvoie. zones actuellement sélectionnées par le composant. La valeur renvoyée est un tableau composé de plusieurs objets contenant des données régionales. La structure des données 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},
...
}

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!