element ui area

Element-Ui-After

Auswahlgerät der chinesischen Verwaltungsabteilung basierend auf Vue und ElementUi

Installieren

npm install element-ui-area -S

Wie man benutzt

Das Projekt hängt von Element-UI ab.

Einführen

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

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

Konfigurationselement

Eigentum	Typ	veranschaulichen	Standardwert
DataSource	Objekt	Datenquelle	- -

verwenden

Cascader

< 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 >

Wählen

< 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 >

Konfigurationselement

Gebietskader

Eigentum	Typ	veranschaulichen	Standardwert
Wert	Saite	Bindungswert	[]
Ebene	Nummer	Aus Datengründen unterstützen derzeit nur drei Ebenen drei Ebenen	3
deaktiviert	Booleschen	Ob zu deaktivieren	FALSCH
Größe	Saite	Größe	klein
nomatchText	Saite	Text angezeigt, wenn kein Matching angezeigt wird	Keine übereinstimmenden Daten
nodatext	Saite	Text in unzähligen Daten angezeigt	Keine Daten
Klar	Booleschen	Ob Sie das Clearing unterstützen sollen	WAHR
Platzhalter	Saite	Besetzen	Bitte wählen Sie den Bereich aus
Sofort	Booleschen	Ob das Änderungsereignis sofort ausgelöst werden soll	WAHR
DataSource	Objekt	Datenquelle	6 Kurzkodierte Verwaltungsabteilungen

Bereichsauswahl

Eigentum	Typ	veranschaulichen	Standardwert
Wert	Saite	Bindungswert	[]
Ebene	Nummer	Aus Datengründen unterstützen derzeit nur drei Ebenen drei Ebenen	3
deaktiviert	Booleschen	Ob zu deaktivieren	FALSCH
Größe	Saite	Größe	klein
Rinne	Nummer	Abstand	10
nomatchText	Saite	Text angezeigt, wenn kein Matching angezeigt wird	Keine übereinstimmenden Daten
nodatext	Saite	Text in unzähligen Daten angezeigt	Keine Daten
Klar	Booleschen	Ob Sie das Clearing unterstützen sollen	WAHR
Platzhalter	Array	Besetzen	["Bitte wählen Sie die Provinz", "Bitte wählen Sie die Stadt", "Bitte wählen Sie den Distrikt und den Landkreis", "Bitte wählen Sie die Straße aus"]
Filterbar	Booleschen	Ob die Suche unterstützt werden soll	FALSCH
Sofort	Booleschen	Ob das Änderungsereignis sofort ausgelöst werden soll	WAHR
DataSource	Objekt	Datenquelle	6 Kurzkodierte Verwaltungsabteilungen

Ereignis

Name	veranschaulichen	Parameter
Ändern	Ausgewählter Wert ändert das Ereignis, das bei der Initialisierung einmal ausgelöst wird	Der Wert nach der Änderung, der chinesische Name
verwischen	Fokus verlieren	Ereignis
Fokus	Fokus	Ereignis

Beispiel für Datenquellenformat

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