vue2使用sortablejs实现el-table的行拖拽

js部分

setSort() {
      const table = this.$refs[this.tableKey].$refs.multipleTable;
      // 获取el-table的tbody的dom节点
      const el = table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];

      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
          const targetRow = this.dataList.splice(evt.oldIndex, 1)[0];
          // this.dataList是table的数据，通过splice进行替换，从而达到数据更新目的        
          this.dataList.splice(evt.newIndex, 0, targetRow);
          this.$nextTick(() => {
            table.doLayout();
          })
        }
      })
    },

css部分

.sortable-ghost { //setSort中绑定的class
  opacity: .8;
  color: #fff!important;
  background: #00BBB3!important;
  
}
::v-deep .editTable .el-table__body:hover {
  cursor: move;
}

注意事项：

• 使用el-table进行行的拖拽的时候，一定需要使用属性row-key，这个需要进行diff；
• 拖拽之后，表格如果有错位，可以调用el-table自带的方法 doLayout进行更新布局，这个最好是放在this.$nextTick()里面去执行；