element-ui && sortablejs 实现表格行拖拽效果

最近接到一个需求，要进行表格中的案例排序，what？ 这怎么实现呐？哈哈哈哈 然后就发现了sortablejs这个插件神器，一起来看看是是怎么在项目中实战的吧....

先来看看效果，ps图片强行做成gif动图（我太难了~）

  // 下载sortablejs插件
  npm i sortablejs
  // 引入
  import Sortable from  'sortablejs'

要拖拽的表格必须要加row-key并且值唯一

• 核心方法rowDrop()
  • 1.获取要拖拽排序的表格
  • 2.注意this指向当前vue实例
  • 3.调用Sortable的onEnd方法，记录拖拽排序之后的表格顺序，在这里我把拖拽排序之后的表格遍历存起来，发交易到后台，记录它们的顺序，页面刷新后拖拽排序不会丢失

    

    

• 点击开始排序按钮触发startSort()方法
• 点击结束排序按钮触发endSort()方法（如果用户并没有拖拽排序，并不发交易到后台，注意节流）

  

• 这样一个表格的行拖拽排序功能就实现啦~

总结：

• 1.写代码要注意到极端情况，比如数据的极端取值，还要注意节流，在不得不发交易的情况下去发，减少服务器的压力
• 2.插件固然好用，最好去了解一下他的实现原理，扣着它的源码看，多和别人的思想交流，才能进一步提升自己.