vue中使用sortablejs实现表格行拖拽排序

halo小伙伴们，在后台管理系统开发的过程中会有遇到使用拖拽进行表格的排序的，如图：

首先我们要下载sortablejs：

npm install sortablejs --save

在需要使用的页面引入

import Sortable from "sortablejs";

以vue3为例：
页面内容：

<template>
	<el-table :data="tableData" :row-key="'id'" style="width: 100%" class="setClassTable">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="分类名称" >
        </el-table-column>
        <el-table-column prop="name" label="操作" >
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="openForm(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="deleteRow(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderIndex" label="排序" >
          <template #default="{ row }">
            <div class="sortable-handle">拖动排序</div>
          </template>
        </el-table-column>
      </el-table>
</template>

<script setup lang="tsx">
import Sortable from "sortablejs";
import {onMounted,reactive, ref,nextTick,watch} from "vue";

// 实现拖动排序
// 创建sortable实例
const initSortable = () => {
  setTimeout(() => {
    // 在异步加载完数据后进行拖动初始化
    const tbody = document.querySelector('.setClassTable .el-table__body-wrapper tbody') as HTMLElement;
    Sortable.create(tbody, {
      handle: '.sortable-handle',
      animation: 300,
      onEnd: evt => {
        // 获取拖动前和拖动后的行索引——可以直接在这里拿到对应的列和排序后的位置进行保存
        const oldIndex = evt.oldIndex;
        const newIndex = evt.newIndex;

        // 根据行索引交换数据
        if (oldIndex !== newIndex) {
          tableData.splice(newIndex, 0, tableData.splice(oldIndex, 1)[0]);
        }
        // 这里后面的数据tableData就是排序后的表格列表了，可以直接进行保存
        console.log('切换位置后的数据',tableData)
      }
    });
  },1000)
}
// 打开页面时候的操作-请求表格数据
const open= async(params) => {
  const param = {
    xxx: xxx
  };
  const { data } = await getOnlineAllCategory(param);
  tableData = data
  nextTick(() => {
    initSortable();
  })
};

// 监听表格数据的变化，重新初始化 Sortable.js
watch(tableData, () => {
  nextTick(() => {
    initSortable();
  })
});
</script>

以上是vue3使用sortablejs实现表格行拖拽排序，那么小伙伴们你们知道vue2的是怎么实现的吗？其实也是大同小异，改成vue2写法即可，用法逻辑是一样的哦。
如果你有更好的方法或者哪里有问题，请大家多多评论私法哦