el-table行拖拽排序效果的实现（基于sortablejs）

前言

ElementUI中的Table组件对于展示数据来说，有着不可替代的作用。但是也有一点点小缺陷，比如行不支持拖拽效果。
当然我们可以借助于第三方库来实现行拖拽效果。

实现方法

实现拖拽效果需要借助于sortablejs库来实现。
GitHub：https://github.com/SortableJS/Sortable
中文网站(无法验证是否为官方网店)：http://www.sortablejs.com/
sortablejs有以下优点（摘至部分readme文档）：

1. Supports touch devices and modern browsers (including IE9) 支持大部分触屏设备及现代浏览器（包括IE9）
2. Can drag from one list to another or within the same list 支持列内拖动及列间拖动
3. CSS animation when moving items 支持拖动时动画效果
4. Multi-drag support 支持同时拖动多个
5. Built using native HTML5 drag and drop API 根据原生Html5 drag和drop API穿件
6. 支持多种框架（Meteor、Angular、React、Knockout、Ploymer、Vue、Ember）
7. 等等其他。。。

安装sortablejs

npm方式:

$ npm install sortablejs --save

使用

1. 普通el-table代码如下：

2. 引入sortablejs组件：

至此，拖拽效果就已完成，具体效果如下：

最终效果

详细代码请移步至：https://codesandbox.io/s/el-table-drag-row-qj1ws7

后记

如有疑问，可以在评论区进行交流。也欢迎点赞⭐收藏 ：）

拓展阅读：

1. React + Router + Antd实现多标签页功能（具体代码实现）
2. 几款常用的表单设计器解决方案
3. React + Antd实现动态切换主题功能

参考链接：

1. https://blog.csdn.net/m0_58016522/article/details/127784778