el-table-draggable＞ 表单拖拽事件

先上效果吧

找了好久想实现一个表单行的拖拽功能，试了很多，但是要不就是很复杂，要不就是效果不理想。

后来找到一个封装好的组件<el-table-draggable> 开箱即用

使用实例

使用前先安装组件 npm i -S el-table-draggable

最好带上淘宝或其他镜像链接，不然安装报错。

import ElTableDraggable from 'el-table-draggable'

  components: {
    ElTableDraggable
  },

<ElTableDraggable>
    <el-table row-key="必填" :data="list">
    </el-table>
</ElTableDraggable>

运行后就能出现上面的效果了，

现在问题来了，效果是有了，现在希望拖拽后出发事件，执行函数来更新数据，

这点试了很多次

以下代码不行 @choose，@end等都试了，不行，无法触发事件。

<ElTableDraggable>
    <el-table row-key="必填" @change="change" :data="list">
    </el-table>
</ElTableDraggable>

后来查看组件是封装了sortable.js

那就去找找sortable.js的事件吧

sortable.js onChoose 选中事件 - itxst.com

按照这个修改文档@onEnd

这个有效了，试试其他事件都有效，记录下来。

<ElTableDraggable>
    <el-table row-key="必填" @onEnd="change" :data="list">
    </el-table>
</ElTableDraggable>