element ui area

elemen-ui-area

Pemilih divisi administratif Tiongkok berdasarkan Vue dan ElementUI

Memasang

npm install element-ui-area -S

Penggunaan

Proyek ini bergantung pada Element-UI, Anda harus memperkenalkannya terlebih dahulu

memperkenalkan

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

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

Item konfigurasi

milik	jenis	menjelaskan	nilai bawaan
Sumber data	Obyek	sumber data	-

menggunakan

Kaskader

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

Memilih

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

Item konfigurasi

area-cascader

milik	jenis	menjelaskan	nilai bawaan
nilai	Rangkaian	Nilai yang mengikat	[ ]
tingkat	Nomor	Level, karena alasan data, saat ini hanya mendukung hingga tiga level	3
dengan disabilitas	Boolean	Apakah akan menonaktifkan	PALSU
ukuran	Rangkaian	ukuran	kecil
noMatchText	Rangkaian	Teks untuk ditampilkan ketika tidak ada kecocokan	Tidak ada data yang cocok
tidak adaDataTeks	Rangkaian	Teks ditampilkan ketika tidak ada data	Tidak ada data
dapat dibersihkan	Boolean	Apakah akan mendukung kliring	BENAR
pengganti	Rangkaian	pengganti	Silakan pilih wilayah
segera	Boolean	Apakah akan segera memicu peristiwa perubahan	BENAR
Sumber data	Obyek	sumber data	Divisi administrasi kode pendek 6 digit

pilih area

milik	jenis	menjelaskan	nilai bawaan
nilai	Rangkaian	Nilai yang mengikat	[ ]
tingkat	Nomor	Level, karena alasan data, saat ini hanya mendukung hingga tiga level	3
dengan disabilitas	Boolean	Apakah akan menonaktifkan	PALSU
ukuran	Rangkaian	ukuran	kecil
selokan	nomor	jarak	10
noMatchText	Rangkaian	Teks untuk ditampilkan ketika tidak ada kecocokan	Tidak ada data yang cocok
tidak adaDataTeks	Rangkaian	Teks ditampilkan ketika tidak ada data	Tidak ada data
dapat dibersihkan	Boolean	Apakah akan mendukung kliring	BENAR
pengganti	Himpunan	pengganti	['Silakan pilih provinsi', 'Silakan pilih kota', 'Silakan pilih kabupaten', 'Silakan pilih jalan']
dapat disaring	Boolean	Apakah akan mendukung pencarian	PALSU
segera	Boolean	Apakah akan segera memicu peristiwa perubahan	BENAR
Sumber data	Obyek	sumber data	Divisi administrasi kode pendek 6 digit

peristiwa

nama	menjelaskan	parameter
mengubah	Peristiwa perubahan nilai yang dipilih akan dipicu satu kali selama inisialisasi.	mengubah arti, nama Cina
mengaburkan	kehilangan fokus	objek acara
fokus	fokus	objek acara

Contoh format sumber data

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