element ui area

요소 UI 영역

Vue 및 ElementUI를 기반으로 한 중국 행정 구역 선택기

설치하다

npm install element-ui-area -S

용법

프로젝트는 Element-UI에 따라 다르므로 먼저 소개해야 합니다.

소개하다

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

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

구성 항목

재산	유형	설명하다	기본값
데이터소스	물체	데이터 소스	-

사용

캐스케이더

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

선택하다

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

구성 항목

지역 캐스케이더

재산	유형	설명하다	기본값
값	끈	바인딩 값	[ ]
수준	숫자	레벨은 데이터상의 이유로 현재 최대 3개 레벨까지만 지원됩니다.	3
장애가 있는	부울	비활성화 여부	거짓
크기	끈	크기	작은
noMatchText	끈	일치하는 항목이 없을 때 표시할 텍스트	일치하는 데이터가 없습니다.
noDataText	끈	데이터가 없을 때 표시되는 텍스트	데이터 없음
삭제 가능	부울	청산 지원 여부	진실
자리 표시자	끈	자리 표시자	지역을 선택해주세요
즉각적인	부울	변경 이벤트를 즉시 트리거할지 여부	진실
데이터소스	물체	데이터 소스	6자리 단축 코드 행정 구역

지역 선택

재산	유형	설명하다	기본값
값	끈	바인딩 값	[ ]
수준	숫자	레벨은 데이터상의 이유로 현재 최대 3개 레벨까지만 지원됩니다.	3
장애가 있는	부울	비활성화 여부	거짓
크기	끈	크기	작은
홈통	숫자	간격	10
noMatchText	끈	일치하는 항목이 없을 때 표시할 텍스트	일치하는 데이터가 없습니다.
noDataText	끈	데이터가 없을 때 표시되는 텍스트	데이터 없음
삭제 가능	부울	청산 지원 여부	진실
자리 표시자	정렬	자리 표시자	['도를 선택해주세요', '시를 선택해주세요', '지역을 선택해주세요', '거리를 선택해주세요']
필터링 가능	부울	검색 지원 여부	거짓
즉각적인	부울	변경 이벤트를 즉시 트리거할지 여부	진실
데이터소스	물체	데이터 소스	6자리 단축 코드 행정 구역

이벤트

이름	설명하다	매개변수
변화	선택한 값 변경 이벤트는 초기화 중에 한 번 발생합니다.	변경된 값, 중국어 이름
흐림	초점을 잃다	이벤트 객체
집중하다	집중하다	이벤트 객체

데이터 소스 형식의 예

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