最近有这样一个需求，就是需要拖拽表格里的数据进行排序，由于 element ui 中 table 组件自身并不具有拖拽功能，所以这里借助第三方插件 sortablejs 来实现此功能。

SortableJS 是一款功能强大的 js 拖拽库，是基于原生 HTML5 中的拖放 api，不依赖 jQuery 等其他框架，并且支持多种框架（angular、vue、react）等。

1、安装 SortableJS

npm install sortablejs -S

2、在需要使用拖拽功能的页面引入该插件。

import Sortable from 'sortablejs'

3、实现该拖拽功能：

handleDrop () {
  const tbody = document.querySelector('.el-table__body-wrapper tbody')
  const that = this
  that.sortable && that.sortable.destroy()
  that.sortable = Sortable.create(tbody, {
    onEnd ({ newIndex, oldIndex }) {
      const currRow = that.tableData.splice(oldIndex, 1)[0]
      that.tableData.splice(newIndex, 0, currRow)
      //   拖动后获取newIdex
      const arr = Array.from(that.tableData)
      that.apiObjDrag = arr.map((item, index) => {
        return {
          giftId: item.giftId,
          sort: index + 1
        }
      })
      // 发请求将该数据传递给服务端即可
    }
  })
}

4、在 mounted 生命周期中执行该方法。

mounted () {
  this.$nextTick(() => {
    this.handleDrop()
  })
}

注意：el-table 中必须指定 row-key，row-key 必须是唯一的，如 ID，不然会出现排序不对的情况，不可用 index，因为拖拽后 index 会变，会有问题。

<el-table
  ref="multipleTable"
  border
  size="mini"
  :data="tableData"
  row-key="giftId"
  tooltip-effect="dark"
  style="width: 100%">
  <el-table-column
    prop="giftId"
    label="礼物ID"
    width="70"
    align="center">
  </el-table-column>
  <el-table-column
    prop="name"
    label="礼物名称"
    align="center">
  </el-table-column>
</el-table>