JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 670
  • Score
    100M100P100Q133426F

make el-table draggable, support row, column, expanded, sortable.js

Package Exports

  • el-table-draggable
  • el-table-draggable/dist/ElTableDraggable.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (el-table-draggable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 drag into an empty el-table

You can see in Demos

  • Drag rows
  • Drag columns(>1.1.0)
  • Drag tree(>1.2.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

other

sortablejs's option

Event

input

data or cloumn after change

other

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

todo

  • Support column
  • support ghost of expanded row or the rest of column
  • 接入 html2canvas 将展开/列部分设定到 dataTransfer.setDragImage 上实现拖拽优化

Donation

By me a coffee