vue 实现element-ui 表格的行拖拽排序 （Sortable）

Sortable它是一个比较简单好用的拖拽排序工具

1.首先是安装下载Sortable （npm install sortablejs --save）

2.在要进行拖拽的页面引入Sortable （import Sortable from 'sortablejs'）

3.写个方法去处理你需要的数据，这里需要注意一下需要等待元素渲染完成后再执行此方法

mounted() {
   this.$nextTick(() => {
      this.rowDrop();
   });
}

rowDrop() {
      const that = this;
      // tbody  拿到你要去操作的拖拽元素的父节点
      const tbody = document.querySelector(
        '.el-table__body-wrapper tbody',
      );

      new Sortable(tbody, {
        animation: 150,  //定义排序动画的时间  单位是ms 
        ghostClass: 'blue-background-class',   //drop placeholder的css类名  可以不设置
        //开始拖拽
        onStart: function (e) {
          e.oldIndex;  // 父元素索引
        },
        //结束拖拽
        onEnd: function (obj) {
          const list = JSON.parse(
            JSON.stringify(that.lastList || that.roleTableList),
          );
          //obj.oldIndex;  元素在旧父元素中的旧索引
          const temp = list.splice(obj.oldIndex, 1)[0];
          //obj.newIndex;  元素在新父元素中的新索引
          list.splice(obj.newIndex, 0, temp);
          that.lastList = list;
        },
      });
    },

 4.处理好数据以后再去调修改排序的接口即可完成表格的行拖拽排序工作

5.Sortable里面有很多的方法和配置项大家根据需要去参考它里面的说明http://www.sortablejs.com/