el table draggable

el-table-可拖动

中文文档

让el-table支持sortable.js

演示页面

特征

• 支持sortablejs中的几乎所有选项
• 支持从一个表拖动到另一个表
• 支持树表
• 支持维图尔
• 支持移动
• 支持拖入空el-table

你可以在演示中看到

• 拖动行
• 拖动列(>1.1.0)
• 拖动树(>1.2.0)
• 通过 set onMove(>1.3.0) 禁用移动
• 设置拖动手柄
• 设置组
• ...sortable.js 中的其他选项
• 事件输入，全部改变后

安装

使用 npm 或纱线

yarn add el-table-draggable

npm i -S el-table-draggable

用法

 import ElTableDraggable from "el-table-draggable" ;

export default {
  components : {
    ElTableDraggable ,
  } ,
} ;

模板

 < template >
  < el-table-draggable >
    < el-table row-key > </ el-table >
  </ el-table-draggable >
</ template >

道具

标签

el-table的包装标签，默认为div

柱子

支持拖栏

移动时

设置 onMove 回调

 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
} , 

其他

sortablejs 的选项

事件

输入

更改后的数据或列

其他

sortablejs 的选项，选项以on开头，示例onSort => @sort

待办事项

• 树表

捐款

由我来一杯咖啡