Giter Site home page Giter Site logo

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

View Code? Open in Web Editor NEW
123.0 123.0 21.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%
column drag drag-and-drop draggable element-ui element-ui-table row sortablejs vue

el-table-draggable's Introduction

Hi there 👋

mizuka-wu's github stats

Most used

mizuka-wu's github stats

el-table-draggable's People

Contributors

anzhizhang avatar mizuka-wu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

el-table-draggable's Issues

Error during using it

I've done what was written in instruction

      <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?

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

树型结构示例如下:

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

复现步骤:

  1. 拖拽起 child1
  2. 滑过child2,此时不松开,此时序列为: child2 / child1 / child3
  3. 然后 再 滑过child2 ,然后松开就报错 ,此时序列为: child1 / child2 / child3 ,

报错信息:
image

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

超快速拖拽后,列表顺序与绑定数据完全混乱,无法保持同步

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

树状表格一级拖拽报错

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

多表格相互推拽有个BUG

多表格相互推拽,如果一个表格超过2条数据,从另一个表格拖拽数据到该表格最后一行,数据会直接跳到第一行去,能否解决一下

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.