vue3 + Element plus + Ts + Sortable.js 实现table拖拽排序

1、安装Sortable.js插件

使用npm install sortable.js --save 或者 yarn add sortable.js

2、还需还要注意是否安装了types/sortablejs插件，如果没有安装还需安装

使用yarn add @types/sortablej 安装或者npm安装视情况而定（不要一会儿npm,一会儿yarn可能会报错，因为两个方法安装的文件路径不同）

3、引入sortable.js

import Sortable from 'sortablejs'

具体详细参数可以看官网：sortable.js中文文档 - itxst.com

4、代码如下 

import {  ref, onMounted, nextTick } from 'vue'

import Sortable from 'sortablejs'

const dragTable = ref()

const initDropTable = () => {
  const el = dragTable.value.$el.querySelector('.el-table__body tbody')
  Sortable.create(el, {
    handle: '.move-icon', //设置指定列作为拖拽
    onEnd(evt: any) {
      const { newIndex, oldIndex } = evt
      console.log(newIndex)
      console.log(oldIndex)
      const currRow = tableData?.splice(oldIndex, 1)[0]
      tableData?.splice(newIndex, 0, currRow)
      sortIndex()
    }
  })
}

const sortIndex = () => {
  const array = []
  tableData.forEach((e, i) => {
    const obj = {
      currency_id: e.currency_id,
      index: i + 1
    }
    array.push(obj)
  })
}


onMounted(() => {
  nextTick(() => {
    initDropTable()
  })
})