element ui area

Élément-ui-après

Dispositif de sélection de division administrative chinoise basé sur Vue et ElementUI

Installer

npm install element-ui-area -S

Comment utiliser

Le projet dépend de l'élément-UI.

Introduire

 import AreaComponent from 'element-ui-area'
Vue . use ( AreaComponent , { } )

// or
import { Cascader , Select } from 'element-ui-area'
Vue . use ( Cascader , { } )
Vue . use ( Select , { } ) 

Élément de configuration

propriété	taper	illustrer	valeur par défaut
Source de données	Objet	Source de données	-

utiliser

Cascade

< template >
    < area-cascader v-model = " value " :level = " 3 " @change = " onChange " />
</ template >
< script >
export default {
    data () {
        return {
            value : []
        }
    },
    methods : {
        onChange ( val , text ) {
            console . log (val)
            console . log (text) // 地区中文
        }
    }
}
</ script >

Sélectionner

< template >
    < div style = " width : 600 px ; margin : 10 px auto ; " >
      < area-select v-model = " value " :level = " 1 " />
      < area-select v-model = " value1 " :level = " 2 " />
      < area-select v-model = " value2 " :level = " 3 " />
    </ div >
</ template >
< script >
export default {
    data () {
        return {
            value : [],
            value1 : [],
            value2 : []
        }
    }
}
</ script >

Élément de configuration

Cassaderie

propriété	taper	illustrer	valeur par défaut
Valeur	Chaîne	Valeur de liaison	[]
niveau	Nombre	Pour des raisons de données, à l'heure actuelle, seuls trois niveaux prennent en charge trois niveaux	3
désactivé	Booléen	Si elle doit désactiver	FAUX
taille	Chaîne	taille	petit
NomatchText	Chaîne	Texte affiché lorsqu'il ne correspondait pas	Aucune donnée correspondante
nodatext	Chaîne	Texte affiché dans d'innombrables données	Pas de données
Claire	Booléen	S'il faut soutenir la compensation	vrai
Espace réservé	Chaîne	Occuper	Veuillez sélectionner la zone
Immédiatement	Booléen	S'il faut déclencher l'événement de changement immédiatement	vrai
Source de données	Objet	Source de données	6 divisions administratives codées courtes

Sélection de la zone

propriété	taper	illustrer	valeur par défaut
Valeur	Chaîne	Valeur de liaison	[]
niveau	Nombre	Pour des raisons de données, à l'heure actuelle, seuls trois niveaux prennent en charge trois niveaux	3
désactivé	Booléen	Si elle doit désactiver	FAUX
taille	Chaîne	taille	petit
gouttière	nombre	espacement	10
NomatchText	Chaîne	Texte affiché lorsqu'il ne correspondait pas	Aucune donnée correspondante
nodatext	Chaîne	Texte affiché dans d'innombrables données	Pas de données
Claire	Booléen	S'il faut soutenir la compensation	vrai
Espace réservé	Tableau	Occuper	[«Veuillez sélectionner la province», «Veuillez choisir la ville», «Veuillez choisir le district et le comté», «Veuillez sélectionner la rue»]
Filtrable	Booléen	S'il faut prendre en charge la recherche	FAUX
Immédiatement	Booléen	S'il faut déclencher l'événement de changement immédiatement	vrai
Source de données	Objet	Source de données	6 divisions administratives codées courtes

événement

nom	illustrer	paramètre
Changement	La valeur sélectionnée modifie l'événement, qui sera déclenché une fois lors de l'initialisation	La valeur après le changement, le nom chinois
se brouiller	Se concentrer sur	Événement
Se concentrer	Se concentrer	Événement

Exemple de format de source de données

{
	"86" : {
		"110000" : "北京市" ,
	},
	"110000" : {
		"110100" : "市辖区"
	},
	"110100" : {
		"110101" : "东城区" ,
		"110102" : "西城区" ,
		"110105" : "朝阳区" ,
		"110106" : "丰台区" ,
		"110107" : "石景山区" ,
		"110108" : "海淀区" ,
		"110109" : "门头沟区" ,
		"110111" : "房山区" ,
		"110112" : "通州区" ,
		"110113" : "顺义区" ,
		"110114" : "昌平区" ,
		"110115" : "大兴区" ,
		"110116" : "怀柔区" ,
		"110117" : "平谷区" ,
		"110118" : "密云区" ,
		"110119" : "延庆区"
    }
}