Skip to content

Latest commit

 

History

History
114 lines (77 loc) · 2.13 KB

README.md

File metadata and controls

114 lines (77 loc) · 2.13 KB
Raw

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