Vue Element-ui el-table sortablejs 表格拖拽排序

首先要在项目中本地安装 sortablejs：

执行 ：npm install sortablejs --save

然后在要实现表格拖拽的.vue文件中 引入 sortablejs：

import Sortable from 'sortablejs'

基本排序功能 templete里面的 表格（el-table）不需要进行设置。

 

只需要在vue  的 mounted 方法中 进行sortable的初始化：

 

let el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];

const sortable = Sortable.create(el, {

onEnd: (evt) => { //监听拖动结束事件

console.log(this) //this是当前vue上下文

console.log(evt.oldIndex) //当前行的被拖拽前的顺序

console.log(evt.newIndex) //当前行的被拖拽后的顺序

// 这里就可以写我们需要传给后台的逻辑代码

},

})

 

在页面中进行调试，鼠标可以拖动一行移动到另一行上（下）。说明功能实现了。

//evt.oldIndex 是当前拖动的行，evt.newIndex是放置到的位置。

//有了evt.oldIndex和evt.newIndex这两个参数做索引，我们可以根据绑定在表格上面的data这个Array 找到，两个相应的记录。就可以针对数据进行操作啦。：）

//今天时间比较完了，该收拾收拾下班回家了。以后有机会再发 进一步功能的代码。欢迎大家一起讨论