先上效果吧
找了好久想实现一个表单行的拖拽功能,试了很多,但是要不就是很复杂,要不就是效果不理想。
后来找到一个封装好的组件<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>