el-table-draggable

中文文档

Let el-table support sortable.js

Demo Page

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

$3

- 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

$3

``bash
yarn add el-table-draggable

npm i -S el-table-draggable
`

Usage

`js
import ElTableDraggable from "el-table-draggable";

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

$3

`html

`

$3

#### tag

the wrapper tag of el-table, default is div

#### column

support drag column

#### onMove

set onMove callback

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

sortablejs's option

$3

#### input

data or cloumn after change

#### other

sortablejs's option, the option start with on, ExampleonSort => @sort`

todo

- [ ] Tree Table

Donation

By me a coffee