element ui area

element-ui-area

基於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 , { } ) 

配置項

屬性	類型	說明	預設值
dataSource	Object	數據源	-

使用

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 >

配置項

area-cascader

屬性	類型	說明	預設值
value	String	綁定值	[ ]
level	Number	層級，由於數據原因，目前最多只支持三級	3
disabled	Boolean	是否禁用	false
size	String	尺寸	small
noMatchText	String	無匹配項時展現的文字	無匹配數據
noDataText	String	無數據時展現的文字	無數據
clearable	Boolean	是否支持清空	true
placeholder	String	佔位符	請選擇地區
immediate	Boolean	是否立即觸發change事件	true
dataSource	Object	數據源	6位短編碼行政區劃

area-select

屬性	類型	說明	預設值
value	String	綁定值	[ ]
level	Number	層級，由於數據原因，目前最多只支持三級	3
disabled	Boolean	是否禁用	false
size	String	尺寸	small
gutter	number	間距	10
noMatchText	String	無匹配項時展現的文字	無匹配數據
noDataText	String	無數據時展現的文字	無數據
clearable	Boolean	是否支持清空	true
placeholder	Array	佔位符	['請選擇省', '請選擇市', '請選擇區縣', '請選擇街道']
filterable	Boolean	是否支持搜索	false
immediate	Boolean	是否立即觸發change事件	true
dataSource	Object	數據源	6位短編碼行政區劃

事件

名稱	說明	參數
change	選中值改變事件，初始化時會觸發一次	改變後的值, 中文名稱
blur	失去焦點	事件對象
focus	聚焦	事件對象

數據源格式範例

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