element ui area

elemento-ui-área

Seletor de divisão administrativa da China baseado em Vue e ElementUI

Instalar

npm install element-ui-area -S

Uso

O projeto depende do Element-UI, você precisa apresentá-lo primeiro

introduzir

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

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

Itens de configuração

propriedade	tipo	ilustrar	valor padrão
fonte de dados	Objeto	fonte de dados	-

usar

Cascata

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

Selecione

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

Itens de configuração

cascata de área

propriedade	tipo	ilustrar	valor padrão
valor	Corda	Valor de ligação	[ ]
nível	Número	Nível, por motivos de dados, atualmente suporta apenas até três níveis	3
desabilitado	Booleano	Se desativar	falso
tamanho	Corda	tamanho	pequeno
noMatchText	Corda	Texto a ser exibido quando não há correspondência	Nenhum dado correspondente
semDataText	Corda	Texto exibido quando não há dados	Sem dados
eliminável	Booleano	Se deve apoiar a compensação	verdadeiro
espaço reservado	Corda	espaço reservado	Selecione uma região
imediato	Booleano	Se deve acionar o evento de mudança imediatamente	verdadeiro
fonte de dados	Objeto	fonte de dados	Divisão administrativa de código curto de 6 dígitos

seleção de área

propriedade	tipo	ilustrar	valor padrão
valor	Corda	Valor de ligação	[ ]
nível	Número	Nível, por motivos de dados, atualmente suporta apenas até três níveis	3
desabilitado	Booleano	Se desativar	falso
tamanho	Corda	tamanho	pequeno
calha	número	espaçamento	10
noMatchText	Corda	Texto a ser exibido quando não há correspondência	Nenhum dado correspondente
semDataText	Corda	Texto exibido quando não há dados	Sem dados
eliminável	Booleano	Se deve apoiar a compensação	verdadeiro
espaço reservado	Variedade	espaço reservado	['Selecione uma província', 'Selecione uma cidade', 'Selecione um distrito', 'Selecione uma rua']
filtrável	Booleano	Se deve oferecer suporte à pesquisa	falso
imediato	Booleano	Se deve acionar o evento de mudança imediatamente	verdadeiro
fonte de dados	Objeto	fonte de dados	Divisão administrativa de código curto de 6 dígitos

evento

nome	ilustrar	parâmetro
mudar	O evento de alteração de valor selecionado será acionado uma vez durante a inicialização.	valor alterado, nome chinês
borrão	perder o foco	objeto de evento
foco	foco	objeto de evento

Exemplo de formato de fonte de dados

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