vue中el-table 实现拖拽排序

1.安装Sortable.js

npm install --save sortablejs

2.在当前vue中JS代码中引入

import Sortable from ‘sortablejs’

3.在当前vue文件template el-table中指定row-key

row-key="id"

    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          console.log(newIndex,oldIndex);
          /*const currRow = _this.apiObj.splice(oldIndex, 1)[0]
          _this.apiObj.splice(newIndex, 0, currRow)
          //   拖动后获取newIdex
          let arr = Array.from(_this.apiObj)
          _this.apiObjDrag = arr.map((item, index) => {
            return {
              id: item.id,
              dictSort: index,
            }
          })*/
        },
      })
    },

  created() {
    this.$nextTick(() => {
　　　 // 行拖拽
      this.rowDrop()
    })
  },