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
พิการ	บูลีน	ไม่ว่าจะปิดการใช้งาน	เท็จ
ขนาด	สตริง	ขนาด	เล็ก
ไม่มี MatchText	สตริง	ข้อความที่จะแสดงเมื่อไม่มีรายการที่ตรงกัน	ไม่มีข้อมูลที่ตรงกัน
ไม่มี DataText	สตริง	ข้อความที่แสดงเมื่อไม่มีข้อมูล	ไม่มีข้อมูล
ชัดเจน	บูลีน	ไม่ว่าจะสนับสนุนการหักบัญชี	จริง
ตัวยึดตำแหน่ง	สตริง	ตัวยึดตำแหน่ง	โปรดเลือกภูมิภาค
ทันที	บูลีน	ว่าจะทริกเกอร์เหตุการณ์การเปลี่ยนแปลงทันทีหรือไม่	จริง
แหล่งข้อมูล	วัตถุ	แหล่งข้อมูล	ฝ่ายบริหารรหัสสั้น 6 หลัก

เลือกพื้นที่

คุณสมบัติ	พิมพ์	แสดงให้เห็น	ค่าเริ่มต้น
ค่า	สตริง	มูลค่าการผูกมัด	-
ระดับ	ตัวเลข	ระดับเนื่องจากเหตุผลด้านข้อมูล ขณะนี้รองรับได้สูงสุดสามระดับเท่านั้น	3
พิการ	บูลีน	ไม่ว่าจะปิดการใช้งาน	เท็จ
ขนาด	สตริง	ขนาด	เล็ก
รางน้ำ	ตัวเลข	ระยะห่าง	10
ไม่มี MatchText	สตริง	ข้อความที่จะแสดงเมื่อไม่มีรายการที่ตรงกัน	ไม่มีข้อมูลที่ตรงกัน
ไม่มี DataText	สตริง	ข้อความที่แสดงเมื่อไม่มีข้อมูล	ไม่มีข้อมูล
ชัดเจน	บูลีน	ไม่ว่าจะสนับสนุนการหักบัญชี	จริง
ตัวยึดตำแหน่ง	อาร์เรย์	ตัวยึดตำแหน่ง	['กรุณาเลือกจังหวัด', 'กรุณาเลือกเมือง', 'กรุณาเลือกอำเภอ', 'กรุณาเลือกถนน']
กรองได้	บูลีน	ไม่ว่าจะรองรับการค้นหา	เท็จ
ทันที	บูลีน	ว่าจะทริกเกอร์เหตุการณ์การเปลี่ยนแปลงทันทีหรือไม่	จริง
แหล่งข้อมูล	วัตถุ	แหล่งข้อมูล	ฝ่ายบริหารรหัสสั้น 6 หลัก

เหตุการณ์

ชื่อ	แสดงให้เห็น	พารามิเตอร์
เปลี่ยน	เหตุการณ์การเปลี่ยนแปลงค่าที่เลือกจะถูกทริกเกอร์หนึ่งครั้งระหว่างการเริ่มต้น	เปลี่ยนค่าชื่อจีน
เบลอ	เสียสมาธิ	วัตถุเหตุการณ์
จุดสนใจ	จุดสนใจ	วัตถุเหตุการณ์

ตัวอย่างรูปแบบแหล่งข้อมูล

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