ดาวน์โหลด el table draggable - el table draggable Source Source Download

el table draggable

หมวดหมู่อื่นๆ

v1.4.12

ดาวน์โหลด

El-table ได้

中文文档

ให้การสนับสนุน el-table cortable.js

หน้าสาธิต

คุณสมบัติ

สนับสนุนตัวเลือกเกือบทั้งหมดใน sortablejs
สนับสนุนลากจากหนึ่งไปยังอีกตารางหนึ่ง
รองรับ treetable
สนับสนุน Vetur
สนับสนุน OnMove
รองรับการลากลงใน el-table ที่ว่างเปล่า

คุณสามารถเห็นในการสาธิต

ลากแถว
ลากคอลัมน์ (> 1.1.0)
Drag Tree (> 1.2.0)
ปิดใช้งานการย้ายโดยตั้งค่า onmove (> 1.3.0)
ตั้งมือจับสำหรับการลาก
ตั้งกลุ่ม
... ตัวเลือกอื่น ๆ ใน sortable.js
อินพุตเหตุการณ์หลังจากการเปลี่ยนแปลงทั้งหมด

ติดตั้ง

ใช้ NPM หรือเส้นด้าย

yarn add el-table-draggable

npm i -S el-table-draggable

การใช้งาน

 import ElTableDraggable from "el-table-draggable" ;

export default {
  components : {
    ElTableDraggable ,
  } ,
} ;

เทมเพลต

 < template >
  < el-table-draggable >
    < el-table row-key > </ el-table >
  </ el-table-draggable >
</ template >

อุปกรณ์ประกอบฉาก

ติดแท็ก

แท็ก wrapper ของ el-table ค่าเริ่มต้นคือ div

คอลัมน์

สนับสนุนคอลัมน์ลาก

onmove

ตั้งค่าการโทรกลับ

 onMove : function ( /**Event*/ evt , /**Event*/ originalEvent , domInfo ) {
   // Example: https://jsbin.com/nawahef/edit?js,output
   evt . dragged ; // dragged HTMLElement
   evt . draggedRect ; // DOMRect {left, top, right, bottom}
   evt . related ; // HTMLElement on which have guided
   evt . relatedRect ; // DOMRect
   evt . willInsertAfter ; // Boolean that is true if Sortable will insert drag element after target by default
   originalEvent . clientY ; // mouse position
   
   domInfo . dragged // the origin dom info of dragged tr, like parent domInfo, level, data, and it's index
   domInfo . related // like dragged
   
   // return false; — for cancel
   // return -1; — insert before target
   // return 1; — insert after target
} ,