sortablejs插件在el-table中的运用
概述需求
有一个Table表格,由于数据是根据自增的ID进行排序显示的,有时了调整顺序会在数据库中直接操作数据表,来达到调整数据顺序的目的,因为为了实现在页面实现较为简单的拖拽排序...:
1、这是原来的顺序:[1, 2, 3, 4]
2、通过鼠标拖拉即可改变位置: [4, 3, 1, 2]
3、编写vue页面(文末有完整页面)
3.1、在需要编写排序的页面引入sortablejs...newIndexList: [],
}
},
mounted() {
// 复制原Table的id按循序存储newIndexList中,
// 每一次调整位置会对...},
也许你会发现item.id + 10000这个有意思的地方,因为我们在更新排序时,修改的是主键,所以会存在主键冲突,所以先增加10000,修改完成后根据已经修改的id在执行自减10000操作,这样就可以实现主键...ID的交换了。