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桁のショートコード行政区分

イベント

名前	説明する	パラメータ
変化	選択された値の変更イベントは、初期化中に 1 回トリガーされます。	変更された値、中国語名
ぼかし	集中力を失う	イベントオブジェクト
集中	集中	イベントオブジェクト

データソース形式の例

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