让element-ui的table可拖动排序,支持 行，列，

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 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-draggable Usage

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

sortablejs's option

Event 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