element ui area

elemento-ui-área

Selector de división administrativa de China basado en Vue y ElementUI

Instalar

npm install element-ui-area -S

Uso

El proyecto depende de Element-UI, primero debes presentarlo

introducir

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

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

Elementos de configuración

propiedad	tipo	ilustrar	valor predeterminado
fuente de datos	Objeto	fuente de datos	-

usar

cascada

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

Seleccionar

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

Elementos de configuración

cascada de área

propiedad	tipo	ilustrar	valor predeterminado
valor	Cadena	Valor vinculante	[ ]
nivel	Número	Nivel, debido a razones de datos, actualmente solo admite hasta tres niveles	3
desactivado	booleano	Si deshabilitar	FALSO
tamaño	Cadena	tamaño	pequeño
noCoincidirTexto	Cadena	Texto que se mostrará cuando no haya coincidencias	No hay datos coincidentes
sin texto de datos	Cadena	Texto que se muestra cuando no hay datos.	Sin datos
borrable	booleano	Ya sea para apoyar la compensación	verdadero
marcador de posición	Cadena	marcador de posición	Por favor seleccione una región
inmediato	booleano	Si se debe activar el evento de cambio inmediatamente	verdadero
fuente de datos	Objeto	fuente de datos	División administrativa de código corto de 6 dígitos

selección de área

propiedad	tipo	ilustrar	valor predeterminado
valor	Cadena	Valor vinculante	[ ]
nivel	Número	Nivel, debido a razones de datos, actualmente solo admite hasta tres niveles	3
desactivado	booleano	Si deshabilitar	FALSO
tamaño	Cadena	tamaño	pequeño
canal	número	espaciado	10
noCoincidirTexto	Cadena	Texto que se mostrará cuando no haya coincidencias	No hay datos coincidentes
sin texto de datos	Cadena	Texto que se muestra cuando no hay datos.	Sin datos
borrable	booleano	Ya sea para apoyar la compensación	verdadero
marcador de posición	Formación	marcador de posición	['Seleccione una provincia', 'Seleccione una ciudad', 'Seleccione un distrito', 'Seleccione una calle']
filtrable	booleano	Ya sea para admitir la búsqueda	FALSO
inmediato	booleano	Si se debe activar el evento de cambio inmediatamente	verdadero
fuente de datos	Objeto	fuente de datos	División administrativa de código corto de 6 dígitos

evento

nombre	ilustrar	parámetro
cambiar	El evento de cambio de valor seleccionado se activará una vez durante la inicialización.	valor cambiado, nombre chino
difuminar	perder el foco	objeto de evento
enfocar	enfocar	objeto de evento

Ejemplo de formato de fuente de datos

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