el-table-draggable
Let el-table support sortable.js
Features
- support almost all options in
sortablejs - support drag from one to another table
- support treeTable
- support vetur
- support onMove
- support drag into an empty
el-table
You can see in Demos
- Drag rows
- Drag columns(>1.1.0)
- Drag tree(>1.2.0)
- disable move by set onMove(>1.3.0)
- Set handle for drag
- Set group
- ...other option in sortable.js
- event input, after the change of all
Install
use npm or yarn
yarn add el-table-draggable
npm i -S el-table-draggableUsage
import ElTableDraggable from "el-table-draggable";
export default {
components: {
ElTableDraggable,
},
};template
<template>
<el-table-draggable>
<el-table row-key></el-table>
</el-table-draggable>
</template>props
tag
the wrapper tag of el-table, default is div
column
support drag column
onMove
set onMove callback
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
},other
Event
input
data or cloumn after change
other
sortablejs's option, the option start with on, ExampleonSort => @sort
todo
- Tree Table