element ui area

Element-ui-after

Chinese administrative division selection device based on Vue and Elementui

Install

npm install element-ui-area -S

How to use

The project depends on Element-UI. You need to introduce it first

Introduce

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

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

Configuration item

property	type	illustrate	default value
DataSource	Object	Data source	-

use

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 >

Select

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

Configuration item

Area-Cascader

property	type	illustrate	default value
Value	String	Binding value	[]
level	Number	Due to data reasons, at present only three levels support three levels	3
disabled	Boolean	Whether to disable	False
size	String	size	small
nomatchtext	String	Text displayed when no matching	No matching data
nodatext	String	Text displayed in countless data	No data
Clearable	Boolean	Whether to support clearing	true
Placeholder	String	Occupy	Please select the area
Immediant	Boolean	Whether to trigger the change event immediately	true
DataSource	Object	Data source	6 short -coded administrative divisions

Area-SELECT

property	type	illustrate	default value
Value	String	Binding value	[]
level	Number	Due to data reasons, at present only three levels support three levels	3
disabled	Boolean	Whether to disable	False
size	String	size	small
gutter	number	spacing	10
nomatchtext	String	Text displayed when no matching	No matching data
nodatext	String	Text displayed in countless data	No data
Clearable	Boolean	Whether to support clearing	true
Placeholder	Array	Occupy	['Please select the province', 'Please choose the city', 'Please choose the district and county', 'Please select the street']
Filterable	Boolean	Whether to support search	False
Immediant	Boolean	Whether to trigger the change event immediately	true
DataSource	Object	Data source	6 short -coded administrative divisions

event

name	illustrate	parameter
Change	Selected value changes the event, which will be triggered once when initialization	The value after the change, the Chinese name
blur	Lose focus	Event
Focus	Focus	Event

Data source format example

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