tree transfer
1.0.0
el-tree-fransfer เป็นส่วนประกอบกล่องรับส่งต้นไม้ที่ใช้ VUE และ element-ui โปรดตรวจสอบให้แน่ใจว่าคุณได้แนะนำ element-ui ก่อนใช้งาน! ฟังก์ชั่นของส่วนประกอบนี้คล้ายกับองค์ประกอบการถ่ายโอนของ element-ui แต่ข้อมูลภายในเป็นโครงสร้างแบบต้นไม้! ในความเป็นจริง ส่วนประกอบ element-ui ที่ el-tree-transfer อาศัยคือ Checkbox, Button และตัวควบคุม Tree tree หลัก! ไม่ใช่ส่วนขยายของส่วนประกอบ Shuttle Box ของ element-ui แต่เพียงอ้างอิงถึงรูปลักษณ์ สไตล์ และฟังก์ชันการทำงานเท่านั้น
เนื่องจากธุรกิจของบริษัทใช้เฟรมเวิร์ก Vue ไลบรารี UI จึงใช้ element-ui เป็นเรื่องยากที่จะหาส่วนประกอบ Vue tree Shuttle Box ที่มีประโยชน์ในตลาด และเราไม่ต้องการแนะนำปลั๊กอินรุ่นเฮฟวี่เวทอื่นๆ นอกเหนือจาก element-ui เพียงเพราะว่า Shuttle Box ดังนั้นจึงมี el-tree-transfer น้ำหนักเบา ใช้งานง่าย ไม่ต้องเสียค่าใช้จ่ายในการเรียนรู้เพิ่มเติม
2.4.6 แก้ไขข้อผิดพลาดในการสร้างใหม่ (โปรดอย่าใช้ 2.4.0-2.4.5) เพิ่มสามโหมดที่ไม่เกี่ยวข้องกับพ่อและลูกชาย (รวมถึงโหมดการอนุญาต) ปรับโครงสร้างไดเร็กทอรีส่วนประกอบ สร้างอัลกอริทึมรถรับส่งใหม่ การทดสอบข้อมูลตัวอย่างคร่าวๆ ได้รับการปรับปรุงอย่างมาก เพิ่มประสิทธิภาพการเลือกทั้งหมดเมื่อผู้ปกครองและเด็กไม่เกี่ยวข้องกัน เหตุการณ์ addBtn คือ add-btn และ RemoveBtn เพิ่มการล้างข้อมูลลงในช่องค้นหา ฟังก์ชั่นรถรับส่งที่ไม่เกี่ยวข้องกับผู้ปกครองและเด็ก
2.3.3 แก้ไขตรรกะการจับคู่รถรับส่ง เพิ่มพารามิเตอร์ rootPidValue ดูบันทึกประจำรุ่นด้านล่างสำหรับคำแนะนำโดยละเอียด
npm แรกให้ดาวน์โหลดปลั๊กอิน
npm install el-tree-transfer --save
หรือ
npm i el-tree-transfer -S
จากนั้นคุณสามารถใช้ el-tree-transfer เหมือนส่วนประกอบปกติ
< template >
< div >
// 你的代码
...
// 使用树形穿梭框组件
< tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
</ tree - transfer >
< / div >
</ template >
< script >
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data ( ) {
return : {
mode : "transfer" , // transfer addressList
fromData : [
{
id : "1" ,
pid : 0 ,
label : "一级 1" ,
children : [
{
id : "1-1" ,
pid : "1" ,
label : "二级 1-1" ,
disabled : true ,
children : [ ]
} ,
{
id : "1-2" ,
pid : "1" ,
label : "二级 1-2" ,
children : [
{
id : "1-2-1" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-1"
} ,
{
id : "1-2-2" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-2"
}
]
}
]
} ,
] ,
toData : [ ]
}
} ,
methods: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode ( ) {
if ( this . mode == "transfer" ) {
this . mode = "addressList" ;
} else {
this . mode = "transfer" ;
}
} ,
// 监听穿梭框组件添加
add ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
} ,
// 监听穿梭框组件移除
remove ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
}
} ,
components : { treeTransfer } // 注册
}
</ script >
< style >
...
</ style > | หมายเลขซีเรียล | พารามิเตอร์ | แสดงให้เห็น | พิมพ์ | ค่าเริ่มต้น | เติมเงิน |
|---|---|---|---|---|---|
| 1 | ความกว้าง | ความกว้าง | สตริง | 100% | แนะนำให้กำหนดความกว้างและตำแหน่งของกล่องด้านนอก |
| 2 | ความสูง | สูง | สตริง | 320px | - |
| 3 | ชื่อ | ชื่อ | สตริง | ["รายการแหล่งที่มา", "รายการเป้าหมาย"] | - |
| 4 | ปุ่ม_ข้อความ | ชื่อปุ่ม | อาร์เรย์ | - | - |
| 5 | จาก_data | แหล่งข้อมูล | อาร์เรย์ | - | รูปแบบข้อมูลเหมือนกับองค์ประกอบแผนผัง element-ui แต่ต้องมี id และ pid |
| 6 | to_data | ข้อมูลเป้าหมาย | อาร์เรย์ | - | รูปแบบข้อมูลเหมือนกับองค์ประกอบแผนผัง element-ui แต่ต้องมี id และ pid |
| 7 | อุปกรณ์ประกอบฉากเริ่มต้น | รายการการกำหนดค่า - เช่นเดียวกับอุปกรณ์ประกอบฉากใน el-tree | วัตถุ | { ป้ายกำกับ: "ป้ายกำกับ" เด็ก: "เด็ก" isLeaf: "leaf" ปิดการใช้งาน: "ปิดการใช้งาน" } | การใช้งานจะเหมือนกับอุปกรณ์ประกอบฉาก el-tree |
| 8 | node_key | ปรับแต่งค่าของ node-key โดยค่าเริ่มต้นคือ id | สตริง | บัตรประจำตัวประชาชน | ต้องสอดคล้องกับชื่อพารามิเตอร์ id ในข้อมูล treedata และต้องไม่ซ้ำกัน |
| 9 | ปิ๊ด | ปรับแต่งชื่อพารามิเตอร์ของ pid ค่าเริ่มต้นคือ "pid" | สตริง | ปิ๊ด | ชาวเน็ตบางคนแนะนำว่าชื่อฟิลด์ที่กำหนดโดยพื้นหลังไม่เรียกว่า pid ดังนั้นจึงเพิ่มการสนับสนุนแบบกำหนดเอง |
| 10 | ใบไม้เท่านั้น | ถูกทอดทิ้ง | - | - | - |
| 11 | กรอง | ไม่ว่าจะเปิดใช้งานฟังก์ชันการกรองหรือไม่ | บูลีน | เท็จ | กรองตามฟิลด์ป้ายกำกับของพารามิเตอร์ defaultProps |
| 12 | เปิดทั้งหมด | ว่าจะขยายทั้งหมดตามค่าเริ่มต้นหรือไม่ | บูลีน | เท็จ | มีปัญหาด้านประสิทธิภาพ |
| 13 | โหนดแผนผังแบบกำหนดเอง การใช้งานจะเหมือนกับแผนผัง element-ui | การทำงาน | - | เวอร์ชัน 2.2.3 แบ่งออกเป็นสองฟังก์ชันเพื่อกำหนดโหนดที่กำหนดเองทางด้านซ้ายและด้านขวาตามลำดับ | |
| 14 | โหมด | ตั้งค่าโหมดกล่องรถรับส่ง | สตริง | โอนย้าย | โหมดมีค่าเริ่มต้นเป็นโหมดการถ่ายโอน ซึ่งเป็นโหมดทรีชัตเทิล ฟิลด์ที่กำหนดค่าได้คือ addressList และสามารถเปลี่ยนเป็นโหมดสมุดที่อยู่ได้ ชื่อของปุ่มจะไม่สามารถปรับแต่งได้ เพียงส่งค่าสี่ค่าในอาร์เรย์ชื่อ ในโหมด addressList ชื่อจะมีค่าเริ่มต้นเป็นสมุดที่อยู่ ผู้รับ บุคคลสำเนาคาร์บอน และบุคคลสำเนาลับ |
| 15 | โอน OpenNode | ไม่ว่าจะขยายโหนดกระสวยหลังกระสวยหรือไม่ | บูลีน | จริง | ค่าดีฟอลต์เป็นจริง ซึ่งหมายความว่าโหนดชัตเทิลจะถูกขยายเพื่อการตรวจสอบด้วยภาพ เนื่องจากจะเกิดปัญหาความล่าช้าอย่างเห็นได้ชัดในการขยายเมื่อมีปริมาณข้อมูลมาก อย่างไรก็ตาม โปรดทราบว่าหากตั้งค่าพารามิเตอร์นี้เป็นเท็จ มันจะไม่ถูกขยายหลังจากกระสวย ท้ายที่สุดแล้ว มันเป็นไปไม่ได้ที่จะระบุได้ว่าจะเป็นชั้นใด |
| 16 | ค่าเริ่มต้น CheckedKeys | โหนดที่เลือกโดยค่าเริ่มต้น | อาร์เรย์ | เท็จ | ตรงกับโหนดเริ่มต้นเริ่มต้นเท่านั้น และจะไม่เปลี่ยนโหนดเริ่มต้นแบบไดนามิกหลังจากที่คุณดำเนินการ |
| 17 | ตัวยึดตำแหน่ง | ตั้งค่าข้อความแจ้งของช่องค้นหา | สตริง | ป้อนคำหลักเพื่อกรอง | - |
| 18 | ค่าเริ่มต้นโอน | ว่าจะรถรับส่งไปยังโหนดโดยอัตโนมัติหนึ่งครั้งโดยเลือก defaultCheckedKeys ไว้ตามค่าเริ่มต้นหรือไม่ | บูลีน | เท็จ | ใช้เพื่อตอบสนองความต้องการของผู้ใช้ที่ไม่ต้องการแยกข้อมูลออกเป็น fromData และ toData |
| 19 | arrayToTree | ไม่ว่าจะเปิดใช้งานการแปลงอาร์เรย์หนึ่งมิติเป็นโครงสร้างต้นไม้หรือไม่ | บูลีน | เท็จ | ข้อมูลต้องมีโหนดรูทและไม่เสียหาย สำหรับรายละเอียดเกี่ยวกับรูปแบบข้อมูล โปรดดู app.vue บน github ตามความสัมพันธ์ที่สอดคล้องกันระหว่าง id และ pid มีปัญหาด้านประสิทธิภาพบางอย่างเมื่อทำการแปลง |
| 20 | ที่อยู่ตัวเลือก | รายการการกำหนดค่าโหมดสมุดที่อยู่ | วัตถุ | {num: หมายเลข คำต่อท้าย: สตริง ตัวเชื่อมต่อ: สตริง} | num-> จำนวนสมุดที่อยู่ที่ต้องการทางด้านขวา ค่าเริ่มต้นคือ 3 ต่อท้าย -> ช่องที่คุณต้องการต่อหลังป้ายกำกับ (เช่น id คือนำ id ของข้อมูลนี้มาต่อที่ด้านหลัง ) ค่าเริ่มต้นคือตัวเชื่อมต่อต่อท้าย -> ตัวเชื่อมต่อ (สตริง) ค่าเริ่มต้น- |
| ยี่สิบเอ็ด | ขี้เกียจ | ไม่ว่าจะเปิดใช้งานการโหลดแบบ Lazy Loading หรือไม่ | บูลีน | เท็จ | เอฟเฟกต์คือการโหลดแบบ el-tree และไม่สามารถใช้พร้อมกับการขยาย openAll หรือการขยายเริ่มต้นได้ |
| ยี่สิบสอง | ขี้เกียจFn | ฟังก์ชั่นการโทรกลับโหลดขี้เกียจ | การทำงาน | - | เมื่อใช้ Lazy จะต้องส่งฟังก์ชันเรียกกลับเข้าไป เช่น:lazyFn='loadNode', ส่งคืนพารามิเตอร์ loadNode(node, solve, from), node->node node ที่ขยายอยู่ในปัจจุบัน, solve->lazyload solve, from -> ซ้าย/ขวา แสดงว่าการโทรกลับมาจากด้านซ้าย/ขวา |
| ยี่สิบสาม | แสงสูง | ไม่ว่าจะเน้นโหนดที่เลือกในปัจจุบันหรือไม่ | บูลีน | เท็จ | - |
| ยี่สิบสี่ | filterNode | ฟังก์ชั่นการค้นหาแบบกำหนดเอง | การทำงาน | - | หากไม่ผ่าน ค่าเริ่มต้นจะยังคงถูกกรองตามฟิลด์ป้ายกำกับของพารามิเตอร์ defaultProps |
| 25 | ค่าเริ่มต้นExpandedKeys | ขยายโหนดตามค่าเริ่มต้น | อาร์เรย์ | - | อาร์เรย์รหัสโหนดที่จะขยายจะถูกขจัดข้อมูลที่ซ้ำกันโดยอัตโนมัติทางด้านซ้ายและด้านขวา |
| 26 | ขี้เกียจขวา | ในเวอร์ชัน 2.2.9 คุณลักษณะlazy จะมีผลกับด้านซ้ายของแผนผังเท่านั้น หากคุณต้องการด้านขวา ให้ใช้การโหลดแบบ Lazy Loading ->lazyRight | บูลีน | - | - |
| 27 | เอสเจอาร์ | โหมดสมุดที่อยู่ ตั้งค่าข้อมูลผู้รับทางด้านขวา | อาร์เรย์ | - | - |
| 28 | กิจกรรมเพื่อสังคม | โหมดสมุดที่อยู่ ตั้งค่าข้อมูลบุคคลสำเนาทางด้านขวา | อาร์เรย์ | - | - |
| 29 | นางสาว | โหมดสมุดที่อยู่ ตั้งค่าข้อมูลบุคคลตาบอดทางด้านขวา | อาร์เรย์ | - | - |
| 30 | rootPidValue | โหมดกล่องชัตเทิล ค่าของ pid ข้อมูลโหนดรูท ที่ใช้เพื่อให้ตรงกับลูปทางออก สำคัญ | สตริง,หมายเลข | 0 | - |
| 31 | ตรวจสอบอย่างเคร่งครัด | ไม่ว่าพ่อลูกจะไม่เกี่ยวข้องกัน | บูลีน | เท็จ | โหมดนี้ไม่รองรับ Lazy การส่งคืน fromData และ toData เป็นข้อมูลล่าสุด และคีย์และโหนดใน obj ไม่สมบูรณ์ และมีความแตกต่างในตรรกะการประมวลผลสำหรับด้านซ้ายและด้านขวาของโหนดพาเรนต์หลังจากลบโหนดย่อย: เนื่องจากจะปรากฏทางด้านขวาเมื่อทำการอนุญาต จึงต้องต้องใช้โหนดพาเรนต์ด้านซ้าย และเมื่อทำการลบการอนุญาต ให้ลบโหนดย่อยออก การอนุญาตไม่ได้หมายความว่าคุณต้องการลบการอนุญาตของผู้ปกครอง |
| 32 | renderAfterขยาย | ไม่ว่าจะเรนเดอร์โหนดลูกหลังจากขยายโหนดทรีเป็นครั้งแรกหรือไม่ | บูลีน | จริง | - |
| 33 | ขยาย OnClickNode | ไม่ว่าจะขยายหรือย่อโหนดเมื่อคลิกที่โหนดเหล่านั้น | บูลีน | จริง | - |
| 34 | ตรวจสอบ OnClickNode | ไม่ว่าจะเลือกโหนดเมื่อคลิกที่มัน | บูลีน | เท็จ | - |
| 35 | เยื้อง | การเยื้องแนวนอนระหว่างโหนดระดับที่อยู่ติดกัน มีหน่วยเป็นพิกเซล | ตัวเลข | 16 | - |
| 36 | ไอคอนคลาส | ปรับแต่งไอคอนสำหรับโหนดต้นไม้ | สตริง | - | - |
| 37 | ลากได้ | ไม่ว่าจะเปิดใช้งานฟังก์ชันโหนดแบบลากและวางหรือไม่ | บูลีน | เท็จ | - |
| 38 | อนุญาตให้ลาก | ตรวจสอบว่าสามารถลากโหนดได้หรือไม่ | ฟังก์ชั่น (โหนด) | - | - |
| 39 | อนุญาตให้วาง | ตรวจสอบว่าสามารถวางโหนดเป้าหมายเมื่อลากได้หรือไม่ | ฟังก์ชั่น (draggingNode, dropNode, พิมพ์) | - | พารามิเตอร์ type มีสามสถานการณ์: 'prev', 'inner' และ 'next' ซึ่งตามลำดับหมายถึงการวางก่อนโหนดเป้าหมาย การแทรกเข้าไปในโหนดเป้าหมาย และวางหลังโหนดเป้าหมาย |
| 40 | ตรวจสอบ StrictlyType | มีสามโหมดที่ไม่เกี่ยวข้องกับพ่อและลูกชาย: โหมดการอนุญาต โหมดหุ่น และโหมดแบบเอกสารสำเร็จรูปแบบแยกส่วน | สตริง | การอนุญาต: การเลือกโหนดย่อยทางด้านซ้ายจะนำโหนดพาเรนต์มาทางด้านขวาโดยอัตโนมัติ โหนดพาเรนต์เดียวกันอาจมีอยู่ทั้งสองด้านของโหมดนี้: หุ่นเชิดบริสุทธิ์ ลูกขนไก่ไม่เกี่ยวข้องกัน แต่ต้นไม้ที่สมบูรณ์จะต้องคงไว้ซึ่งโครงสร้างรูปร่าง โดยจะนำเฉพาะส่วนที่จำเป็นสำหรับลูกขนไก่ไปยังฝั่งตรงข้ามโดยอัตโนมัติเพื่อประกบกัน โครงสร้างโครงกระดูก โหนดที่ไม่ใช่ลีฟเดียวกันอาจมีอยู่ทั้งสองด้านของโหมดนี้ ส่วนแม่ลูกล้วนๆ ไม่ได้เชื่อมโยงกระสวย และไม่รักษาโครงสร้างต้นไม้ที่สมบูรณ์เพื่อสร้างรูปร่างต้นไม้ทางด้านขวา ด้านซ้ายต้องรื้อ และด้านซ้ายต้องรื้อ ยิ่งด้านขวา โครงสร้างต้นไม้ก็ยิ่งสมบูรณ์มากขึ้น ด้านซ้ายและด้านขวาของลวดลายนี้ทำให้มีเอกลักษณ์เฉพาะตัวที่เข้มงวด |
| หมายเลขซีเรียล | ชื่อเหตุการณ์ | แสดงให้เห็น | พารามิเตอร์การโทรกลับ |
|---|---|---|---|
| 1 | เพิ่ม-btn | เหตุการณ์ที่เกิดขึ้นเมื่อคลิกปุ่มเพิ่ม (addBtn ก่อน 2.4.0) | ฟังก์ชั่น (fromData, toData, obj) โหมดการถ่ายโอนกล่องกระสวยต้นไม้คือ 1. ข้อมูลที่เหลือหลังจากการเคลื่อนไหว 2. ข้อมูลที่ถูกต้องหลังจากการเคลื่อนไหว 3. คีย์โหนดที่ถูกย้าย, โหนด, halfKeys, วัตถุ halfNodes สมุดที่อยู่ ในโหมด, พารามิเตอร์ที่ส่งคืนคือรายชื่อผู้รับที่ถูกต้อง รายการสำเนาคาร์บอนที่ถูกต้อง และรายการสำเนาคาร์บอนตาบอดด้านขวา |
| 2 | ลบ-btn | เหตุการณ์เกิดขึ้นเมื่อคลิกปุ่มลบ (removeBtn ก่อน 2.4.0) | ฟังก์ชั่น (fromData, toData, obj) โหมดการถ่ายโอนกล่องกระสวยต้นไม้คือ 1. ข้อมูลที่เหลือหลังจากการเคลื่อนไหว 2. ข้อมูลที่ถูกต้องหลังจากการเคลื่อนไหว 3. คีย์โหนดที่ถูกย้าย, โหนด, halfKeys, วัตถุ halfNodes สมุดที่อยู่ ในโหมด, พารามิเตอร์ที่ส่งคืนคือรายชื่อผู้รับที่ถูกต้อง รายการสำเนาคาร์บอนที่ถูกต้อง และรายการสำเนาคาร์บอนตาบอดด้านขวา |
| 3 | ซ้าย-ตรวจสอบ-เปลี่ยน | เหตุการณ์การตรวจสอบข้อมูลต้นฉบับด้านซ้าย | function(nodeObj, treeObj, checkAll) ดูค่าส่งคืนเหตุการณ์การตรวจสอบองค์ประกอบ el-tree พารามิเตอร์ checkAll ใหม่จะระบุว่าทั้งหมดถูกเลือกหรือไม่ |
| 4 | ขวา-ตรวจสอบ-เปลี่ยน | เหตุการณ์การตรวจสอบข้อมูลเป้าหมายที่ถูกต้อง | function(nodeObj, treeObj, checkAll) ดูค่าส่งคืนเหตุการณ์การตรวจสอบองค์ประกอบ el-tree พารามิเตอร์ checkAll ใหม่จะระบุว่าทั้งหมดถูกเลือกหรือไม่ |
| 5 | โหนดลากเริ่มต้น | เหตุการณ์เกิดขึ้นเมื่อโหนดเริ่มลาก | มีทั้งหมด 3 พารามิเตอร์ ตามลำดับ: "ซ้าย"/"ขวา" โหนดที่สอดคล้องกับโหนดที่ลาก และเหตุการณ์ |
| 6 | โหนดลากป้อน | เหตุการณ์เกิดขึ้นเมื่อลากไปยังโหนดอื่น | มีทั้งหมด 4 พารามิเตอร์ตามลำดับ: "ซ้าย"/"ขวา" โหนดที่สอดคล้องกับโหนดที่ลาก โหนดที่สอดคล้องกับโหนดที่ป้อน และเหตุการณ์ |
| 7 | โหนดลากออก | เหตุการณ์เกิดขึ้นเมื่อลากออกจากโหนด | มีทั้งหมด 4 พารามิเตอร์ตามลำดับ: "ซ้าย"/"ขวา" โหนดที่สอดคล้องกับโหนดที่ลาก โหนดที่สอดคล้องกับโหนดด้านซ้าย และเหตุการณ์ |
| 8 | โหนดลากไป | เหตุการณ์ที่เกิดขึ้นเมื่อโหนดถูกลาก (คล้ายกับเหตุการณ์การวางเมาส์เหนือของเบราว์เซอร์) | มีทั้งหมด 4 พารามิเตอร์ตามลำดับ: "ซ้าย"/"ขวา" โหนดที่สอดคล้องกับโหนดที่ลาก โหนดที่สอดคล้องกับโหนดที่ป้อนในปัจจุบัน และเหตุการณ์ |
| 9 | โหนดลากสิ้นสุด | เหตุการณ์เกิดขึ้นเมื่อการลากสิ้นสุด (อาจไม่สำเร็จ) | มีทั้งหมด 5 พารามิเตอร์ตามลำดับ: "ซ้าย"/"ขวา", โหนดที่สอดคล้องกับโหนดที่ถูกลาก, โหนดสุดท้ายที่ป้อนเมื่อการลากสิ้นสุดลง (อาจว่างเปล่า), ตำแหน่งตำแหน่งของโหนดที่ถูกลาก (ก่อน , หลัง, ภายใน) เหตุการณ์ |
| 10 | โหนดดรอป | เหตุการณ์เกิดขึ้นเมื่อการลากเสร็จสมบูรณ์ | มีทั้งหมด 5 พารามิเตอร์ตามลำดับ: "ซ้าย"/"ขวา", โหนดที่สอดคล้องกับโหนดที่ถูกลาก, โหนดสุดท้ายที่ป้อนเมื่อการลากสิ้นสุดลง, ตำแหน่งตำแหน่งของโหนดที่ถูกลาก (ก่อน, หลัง, ด้านใน) , เหตุการณ์ |
| หมายเลขซีเรียล | ชื่อ | แสดงให้เห็น |
|---|---|---|
| 1 | เคลียร์เช็คแล้ว | ล้างโหนดที่เลือก ล้างทั้งหมดตาม type：string left左边right右边all全部默认all |
| 2 | รับการตรวจสอบ | รับข้อมูลที่เลือก |
| 3 | ตั้งค่าตรวจสอบแล้ว | ตั้งค่าฟังก์ชันข้อมูลที่เลือก (leftKeys = [], rightKeys = []) |
| 4 | ล้างตัวกรอง | ล้างเงื่อนไขช่องค้นหา ล้างฟังก์ชันทั้งหมดตามค่าเริ่มต้น (ประเภท: สตริง) ซ้าย ซ้าย ขวา ทั้งหมด ค่าเริ่มต้นทั้งหมด |
| หมายเลขซีเรียล | ชื่อ | แสดงให้เห็น |
|---|---|---|
| 1 | ท้ายกระดาษซ้าย | ช่องด้านล่างซ้ายและขวาของกล่องลูกขนไก่ |
| 2 | ส่วนท้ายขวา | ช่องด้านล่างซ้ายและขวาของกล่องลูกขนไก่ |
| 3 | ชื่อซ้าย | เนื้อหาแบบกำหนดเองทางด้านซ้ายและด้านขวาของพื้นที่ชื่อกล่องลูกขนไก่ |
| 4 | ชื่อขวา | เนื้อหาแบบกำหนดเองทางด้านซ้ายและด้านขวาของพื้นที่ชื่อกล่องลูกขนไก่ |
| 5 | รูปร่าง | ช่องด้านบนของพื้นที่เนื้อหาด้านซ้าย |
| 6 | ถึง | ช่องด้านบนของพื้นที่เนื้อหาทางด้านขวา |
| 7 | เนื้อหาด้านซ้าย | ปรับแต่งโหนดทรีด้านซ้าย |
| 8 | เนื้อหาถูกต้อง | ปรับแต่งโหนดต้นไม้ที่ถูกต้อง |
2.4.6 แก้ไขข้อผิดพลาดในการสร้างใหม่ (โปรดอย่าใช้ 2.4.0-2.4.5) เพิ่มสามโหมดที่ไม่เกี่ยวข้องกับพ่อและลูกชาย (รวมถึงโหมดการอนุญาต) ปรับโครงสร้างไดเร็กทอรีส่วนประกอบ สร้างอัลกอริทึมรถรับส่งใหม่ การทดสอบข้อมูลตัวอย่างคร่าวๆ ได้รับการปรับปรุงอย่างมาก เพิ่มประสิทธิภาพการเลือกทั้งหมดเมื่อผู้ปกครองและเด็กไม่เกี่ยวข้องกัน เหตุการณ์ addBtn คือ add-btn และ RemoveBtn เพิ่มการล้างข้อมูลลงในช่องค้นหา ฟังก์ชั่นรถรับส่งที่ไม่เกี่ยวข้องกับผู้ปกครองและเด็ก
2.3.3 เปลี่ยนอัลกอริธึมสำหรับการตัดสินว่าเป้าหมายรถรับส่งมีอยู่แล้วที่ฝั่งตรงข้ามหรือไม่ เพื่อหลีกเลี่ยงผลลัพธ์การจับคู่ที่ไม่คาดคิดของนิพจน์ทั่วไป str ดั้งเดิม (เช่น ทั้งช่องลูกและช่องรายการมีรหัสนี้ หลังจากถอดรถรับส่งออกแล้ว ข้อมูลในลูกหายไป และข้อมูลในรายการหายไป ในขณะนี้ ตรรกะการจับคู่ดั้งเดิม
rootPidValueยังคงละเว้นรถรับส่งเมื่อเป้าหมายงานมีอยู่แล้วในฝั่งตรงข้าม) และ ไม่บังคับให้ pid ของโหนดรูทเปลี่ยนเป็น 0 อีกต่อไป
2.3.2 ปรับโหมดสมุดที่อยู่ให้เหมาะสม
2.3.1 ย้ายการตั้งค่า css ของเลเยอร์ภายนอกสำหรับ el-tree ไปยังเลเยอร์ด้านใน เพื่อลดผลกระทบของการยกเลิก CSS ที่กำหนดขอบเขตใน 2.3.0
2.3.0 ยกเลิกการกำหนดขอบเขต CSS
ในเวอร์ชัน 2.2.9 คุณลักษณะlazy จะมีผลกับด้านซ้ายของแผนผังเท่านั้น หากคุณต้องการด้านขวา ให้ใช้การโหลดแบบ Lazy Loading ->lazyRight
2.2.8 ปรับการใช้ defaultCheckedKeys และ defaultTransfer ร่วมกัน ซึ่งก่อให้เกิดปัญหาในการเพิ่มเหตุการณ์ โดยปกติแล้ว Shuttle แรกที่เป็นค่าเริ่มต้นคือพื้นหลังขี้เกียจและไม่สร้างข้อมูลสองรายการจาก Data และ toData โดยจะต้องแยกออกจากส่วนหน้า ในเวลานี้ จำเป็นต้องทริกเกอร์เหตุการณ์การเพิ่มอีกครั้ง หรือ แทนที่จะใช้ defaultTransfer คุณสามารถเรียกใช้ฟังก์ชัน addToAims(false) ด้วยตนเองได้ หากพารามิเตอร์ถูกส่งผ่านเป็นเท็จ การเรียกกลับจะไม่เกิดขึ้น กระตุ้น
2.2.6 เพิ่มวิธี
clearCheckedเพื่อล้างโหนดที่เลือก
2.2.5 เพิ่มพารามิเตอร์
defaultExpandedKeysเพื่อขยายโหนดตามค่าเริ่มต้น
2.2.3 แยก
参数13 renderContentคือrenderContentLeft,renderContentRightตามลำดับ กำหนดฟังก์ชันโหนดที่กำหนดเองทางด้านซ้ายและด้านขวา เพิ่มฟังก์ชันfilterNodeเพื่อปรับแต่งการค้นหา
2.2.2 เพิ่มพารามิเตอร์ไฮไลต์ที่เลือก
2.2.1 เพิ่มเหตุการณ์ที่เลือกทั้งหมดที่ชื่อ สำหรับคำอธิบายพารามิเตอร์โดยละเอียด โปรดดู
事件3，事件4
2.2.0 เพิ่มฟังก์ชันการโหลดแบบ Lazy Loading (โหมดสมุดที่อยู่ที่ไม่ใช่) สำหรับคำอธิบายพารามิเตอร์โดยละเอียด โปรดดู
参数21, 参数22
2.1.2 เพิ่มรายการที่กำหนดค่าได้สำหรับโหมดสมุดที่อยู่ แต่เป็นโหมดการบำรุงรักษาที่ไม่ใช่หลัก ความยืดหยุ่นยังคงต่ำ สำหรับคำอธิบายพารามิเตอร์โดยละเอียด ดู
参数20
2.1.1 แก้ไขข้อผิดพลาดของรถรับส่งเมื่อเลือกโหนดรูทในโหมดอาเรย์ ละทิ้งพารามิเตอร์
leafOnlyและระวังอย่าใช้พารามิเตอร์ arrayToTree หากเป็นโครงสร้างต้นไม้อยู่แล้ว
2.1.0 เพิ่มพารามิเตอร์ arrayTotree เพื่อแปลงอาร์เรย์หนึ่งมิติเป็นโครงสร้างต้นไม้ที่ต้องการโดยอัตโนมัติ (ดูพารามิเตอร์ 19 หรือ github-app.vue เพื่อดูรายละเอียด) แก้ไขปัญหาของโหนดที่เลือกเพียงครึ่งเดียวหลังจากรถรับส่งที่ไม่จำเป็นออก ตัวแปร
2.0.2 เพิ่มพื้นที่เนื้อหาที่กำหนดเองของสล็อตส่วนหัว
2.0.1 แก้ไขปัญหาการขาดการเชื่อมต่อระหว่างผู้ปกครองและเด็ก
เวอร์ชัน 2.0.0 เพิ่มกิจกรรมการตรวจสอบข้อมูลทางด้านซ้ายและด้านขวาของกล่องลูกขนไก่ และช่องด้านล่างด้านซ้ายและด้านขวาของกล่องลูกขนไก่
เวอร์ชัน 1.9.8 แก้ไขการรายงานข้อผิดพลาดของปุ่มที่กำหนดเอง
button_text
เวอร์ชัน 1.9.7 เพิ่มแอตทริบิวต์
defaultTransferเพื่อตอบสนองความต้องการของผู้ใช้ที่ไม่ต้องการแยกข้อมูลออกเป็น fromData และ toData และเพิ่มแอตทริบิวต์placeholder
1.9.0 ปรับปรุงความแข็งแกร่งในการจับคู่ปกติเมื่อ ID มีทั้งตัวเลขและตัวอักษร
เวอร์ชัน 1.8.9 แก้ไขข้อผิดพลาดการทำสำเนาที่เกิดจากรถรับส่งเมื่อโหนดเป็นทั้งโหนดสาขาในด้านหนึ่งและโหนดลีฟในอีกด้านหนึ่ง! แก้ไขข้อผิดพลาดตัวกรองที่ไม่ถูกต้องเมื่อกำหนดชื่อโหนดเอง
เวอร์ชัน 1.8.8 เพิ่มพารามิเตอร์
transferOpenNodeเพื่อจัดการว่าจะขยายโหนดหลังจากรับส่งหรือไม่ และdefaultCheckedKeysใช้เพื่อตั้งค่าการขยายเริ่มต้นเริ่มต้นของโหนด
เวอร์ชัน 1.8.7 เพิ่มโหมดสมุดที่อยู่ ซึ่งสามารถกำหนดค่าได้ผ่านฟิลด์โหมด ค่าทางเลือกของฟิลด์โหมดคือ
transfer|addressList
เวอร์ชัน 1.7.7 ปรับพารามิเตอร์ของเหตุการณ์
addBtnและremoveBtnโดยส่งคืนพารามิเตอร์ 3 ตัว พารามิเตอร์ตัวแรกคือข้อมูลที่ถูกย้ายจากข้อมูล พารามิเตอร์ตัวที่สองคือข้อมูลที่ถูกย้ายไปยังข้อมูล และพารามิเตอร์ตัวที่สามคือออบเจ็กต์ {keys, nodes, harfKeys, harfNodes} . เพิ่มพารามิเตอร์renderContentเพื่อรองรับการปรับแต่งโหนดต้นไม้
เวอร์ชัน 1.6.7 เพิ่ม
filter,openAllเพื่อตั้งค่าว่าจะเปิดใช้งานการกรองหรือไม่ และจะขยายทั้งหมดตามค่าเริ่มต้นหรือไม่
เวอร์ชัน 1.5.9 เพิ่มพารามิเตอร์
leafOnlyเพื่อตั้งค่าว่าจะส่งคืนเฉพาะโหนดปลายสุดของแผนผังหรือไม่
เวอร์ชัน 1.5.8 กู้คืนโค้ดสำหรับการส่งคืน
nodesที่ถูกลบอย่างอธิบายไม่ได้ในเวอร์ชันก่อนหน้า หากโปรเจ็กต์ของคุณต้องการเพียงค่าโหนด-คีย์ของรถรับส่ง ก็ไม่จำเป็นต้องอัปเดต! ขอโทษ - -
เวอร์ชัน 1.5.7 แก้ไขปัญหาที่บางครั้งข้อมูลอะซิงโครนัสของส่วนประกอบย่อยไม่ได้รับการอัพเดต! แก้ไขข้อผิดพลาดเมื่อปรับแต่งชื่อพารามิเตอร์ node_key ลูก ๆ แทนที่ pid ของชั้นแรกของข้อมูลโดยอัตโนมัติด้วย 0
เวอร์ชัน 1.4.9 เพิ่มพารามิเตอร์การเรียกกลับสำหรับการเพิ่มและการลบปุ่ม พารามิเตอร์แรกของฟังก์ชัน (คีย์ โหนด) คือค่าโหนดคีย์ของโหนดที่เลือก และพารามิเตอร์ตัวที่สองคือโหนดโหนดที่เลือก
เวอร์ชัน 1.4.8 แก้ไขปัญหาที่ ID ไม่สามารถผ่านฟังก์ชันการตรวจสอบซ้ำเมื่อเป็นหมายเลขประเภท แต่ก็ยังแนะนำให้ใช้ประเภทสตริงสำหรับ ID
เวอร์ชัน 1.4.7 เพิ่มพารามิเตอร์
defaultPropsพารามิเตอร์node_keyและพารามิเตอร์pidฟังก์ชันหลักคือการปรับแต่งชื่อฟิลด์ที่สำคัญบางส่วนเพื่อปรับปรุงความยืดหยุ่นของข้อมูล และหลีกเลี่ยงการเสียสละกับพื้นหลังเนื่องจากชื่อฟิลด์ที่แตกต่างกัน
เวอร์ชัน 1.3.7 ยกเลิกการพึ่งพาไลบรารี loadsh ก่อนหน้านี้ ไลบรารีนี้ใช้สำหรับการประมวลผลสำเนาเชิงลึกบางรายการเท่านั้น
พารามิเตอร์: width คำอธิบาย: ประเภท宽度: ต้องใช้ String : false ค่าเริ่มต้น: 100% ส่วนเสริม:建议在外部盒子设定宽度和位置
พารามิเตอร์: height คำอธิบาย: ประเภท高度: String ที่จำเป็น: false เริ่มต้น: 320px
พารามิเตอร์: title คำอธิบาย: ประเภท标题: Array จำเป็น: false ค่าเริ่มต้น: ["源列表", "目标列表"]
พารามิเตอร์: button_text คำอธิบาย: ประเภท按钮名字: Array จำเป็น: false เริ่มต้น:空
พารามิเตอร์: from_data คำอธิบาย: ประเภท源数据: Array จำเป็น: true ส่วนเสริม:数据格式同element-ui tree组件，但必须有id和pid
พารามิเตอร์: to_data คำอธิบาย: ประเภท目标数据: Array จำเป็น: true ส่วนเสริม:数据格式同element-ui tree组件，但必须有id和pid
พารามิเตอร์: defaultProps คำอธิบาย:配置项-同el-tree中props จำเป็น: false ส่วนเสริม:用法和el-tree的props一样
พารามิเตอร์: คำอธิบาย node_key :自定义node-key的值，默认为id : false ส่วนเสริม:必须与treedata数据内的id参数名一致，必须唯一
พารามิเตอร์: pid คำอธิบาย:自定义pid的参数名，默认为"pid" จำเป็น: false ส่วนเสริม:有网友提出后台给的字段名不叫pid，因此增加自定义支持
--(ล้าสมัย) ไม่แนะนำ! พารามิเตอร์: leafOnly คำอธิบาย:是否只返回叶子节点ประเภท: Boolean จำเป็น: false ส่วนเสริม:默认false，如果你只需要返回的末端子节点可使用此参数
พารามิเตอร์: คำอธิบาย filter :是否开启筛选功能ประเภท: Boolean จำเป็น: false
พารามิเตอร์: openAll Description:是否默认展开全部: Boolean Required: false
พารามิเตอร์: renderContent คำอธิบาย: ประเภท自定义树节点: Function ที่ต้องการ: false การเสริม:用法同element-ui tree
พารามิเตอร์: คำอธิบาย mode :设置模式，字段可选值为transfer|addressList ที่อยู่: String ที่จำเป็น: false ส่วนเสริม: mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
พารามิเตอร์: transferOpenNode คำอธิบาย:穿梭后是否展开穿梭的节点: ต้องใช้ Boolean : false ส่วนเสริม:默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
พารามิเตอร์: defaultCheckedKeys คำอธิบาย: ประเภท默认展开节点: Array ที่ต้องการ: false ส่วนเสริม:只匹配初始时默认节点，不会在你操作后动态改变默认节点
พารามิเตอร์: placeholder คำอธิบาย:设置搜索框提示语: String ที่จำเป็น: false ส่วนเสริม:默认为请输入关键词进行筛选
พารามิเตอร์: defaultTransfer description:是否自动穿梭一次默认选中defaultCheckedKeys的节点: Boolean น จำเป็น: false ส่วนเสริม:默认false，用来满足用户不想将数据拆分成fromData和toData的需求
พารามิเตอร์: arrayToTree คำอธิบาย:是否开启一维数组转化为树形结构ประเภท: Boolean จำเป็น: false ส่วนเสริม:数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题
พารามิเตอร์: addressOptions คำอธิบาย:通讯录模式配置项{num: Number, suffix: String, connector: String} ประเภท: Object ที่ต้องการ: false ส่วนเสริม: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认-
พารามิเตอร์: lazy คำอธิบาย: ไม่是否启用懒加载หรือไม่ ประเภท: Boolean จำเป็น: false ส่วนเสริม:默认false，效果动el-tree懒加载，不可和openAll或默认展开同时使用
พารามิเตอร์: lazyFn คำอธิบาย: ประเภท懒加载的回调函数: Function ที่จำเป็น: true ส่วนเสริม:当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left|right 表示回调来自左侧|右侧
เหตุการณ์: addBtn คำอธิบาย:点击添加按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
เหตุการณ์: removeBtn คำอธิบาย:点击移除按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
เหตุการณ์: left-check-change คำอธิบาย: พารามิเตอร์การเรียกกลับ左侧源数据勾选事件: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
เหตุการณ์: right-check-change คำอธิบาย:右侧目标数据勾选事件: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值，新增第三个参数表示是否全部选中
ช่อง: left-footer , right-footer คำอธิบาย:穿梭框左侧、右侧底部slot
ช่อง: title-left , title-right คำอธิบาย:穿梭框标题区左侧、右侧自定义内容
