关于实现表格拖拽排序的功能

想要实现表格拖拽排序，就必须要用到 Sortable，不吹不黑，是真的好用

http://www.sortablejs.com/http://www.sortablejs.com/

这里做的是拖动特定列进行排序

第一步，下载并引入

// 引入
import Sortable from 'sortablejs'

第二步，在表格中创建拖动列，并设置好元素类名 class="sort"

<!-- 排序部分 -->
<template v-slot:sort>
  <div class="sort">
    <p class="sortItem"></p>
    <p class="sortItem"></p>
    <p class="sortItem"></p>
  </div>
</template>

效果类似于：三

第三步，添加简单的拖拽处理事件

setSort(){
  const el = document.querySelector('.el-table__body-wrapper tbody')
  new Sortable.create(el,{
    handle: '.sort',
    animation: 150,
    ghostClass: 'blue-background-class',
    setData:function(dataTransfer){
      dataTransfer.setData('Text', '')
    },
    onEnd:({ newIndex, oldIndex }) => {
      //交换处理
      const currRow = this.tableData.splice(oldIndex, 1)[0]
      this.tableData.splice(newIndex, 0, currRow)

      //添加回调处理函数
      callback()
    }
})

第四步，在mounted中声明拖拽事件，使其生效

mounted() {
  this.setSort()
}

至此，表格拖拽完成