mizuka-wu / el-table-draggable Goto Github PK

View Code? Open in Web Editor NEW

125.0 2.0 22.0 2.49 MB

让element-ui的table可拖动排序,支持行，列，跨表格等特性

Home Page: https://www.mizuka.top/el-table-draggable/index.html

License: MIT License

JavaScript 65.31% HTML 0.89% Vue 33.80%

vue element-ui element-ui-table draggable sortablejs drag-and-drop drag column row

el-table-draggable's Introduction

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

el-table-draggable's People

Contributors

Stargazers

Watchers

el-table-draggable's Issues

低版本element-ui的el-table没有treeProps时会出错，且无报错信息

此处会错误

树状表格一级拖拽报错

拖拽一级,多拖拽几次后会报错, Error in render: "TypeError: Cannot read properties of undefined (reading 'subItem')"
导致视图顺序错乱,但是数据并未错乱.

Electron项目，PC上，鼠标操作。当极快速（疯狂）进行拖拽操作时，只需要10次以内，就会让界面上看到的行次序与实际绑定的数据的次序完全失步，即人眼看上去的顺序和实际能得到的数据顺序完全不一致了。比如看到的行id是2,6,3，绑定数据其实是6,3,2。
虽然这种操作几乎只会在极限测试和近乎恶意的操作情况下才会发生，但由于没有一个明确的边界，所以并不能排除用户在偶然的几次快速操作下导致数据和界面失步，且这种错误一旦发生，用户是很难察觉的。
该现象目前可以稳定复现，目测感觉好像是在拖拽操作的放开阶段，还没有复位完毕时继续疯狂拖拽，就能复现该问题。
刚在https://www.mizuka.top/el-table-draggable/index.html#/ 上试了一下，很容易就可以复现。复现后，该页面下方的数据显示框和上面看到的次序会完全不一致。

树形结构表格同层级拖拽边界问题

树型结构示例如下：

parent1 -----------------
child1 -----------
child2 -----------
child3 -----------

复现步骤：

拖拽起 child1
滑过child2，此时不松开，此时序列为： child2 / child1 / child3
然后再滑过child2 ，然后松开就报错，此时序列为： child1 / child2 / child3 ，

报错信息：

总结：
拖拽一行和其他的交换位置后，并未松开，然后后悔操作再拖拽回原来的位置就会报上述错误

      <el-table-draggable>
        <el-table :data="mainObjects" height="calc(100vh - 110px)">
        <el-table-column label="ID" prop="id" sortable/>

But I got errors, starting from.

 Property "$createElement" was accessed during render but is not defined on instance. 
  at <ElementUiElTableDraggable

What did I do wrong and how can I make it work?

mizuka-wu / el-table-draggable Goto Github PK

el-table-draggable's Introduction

el-table-draggable

Features

You can see in Demos

Install

use npm or yarn

Usage

template

props

tag

column

onMove

other

Event

input

other

todo

Donation

el-table-draggable's People

Contributors

Stargazers

Watchers

Forkers

el-table-draggable's Issues

Recommend Projects

Recommend Topics

Recommend Org