Vue3 + element Plus + SortableJs，实现表格行拖拽排序（已踩什么都写了，就是拖动不了的坑）

 一、关于Sortable.js

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

sortable.js中文文档 - itxst.com

二、效果演示

点击链接可查看→效果展示-CSDN直播

三、上代码

3.1、安装（已默认安装过element Plus）

npm install sortablejs --save

3.2、组件引入

import Sortable from 'sortablejs';

3.3、表格

el-table中只需要加一个( row-k="XX" )即可，row-key对应的必须是数组（tableData）中的唯一值

<el-table
                :data="tableData"
                row-key="id" 
                :default-sort="{ prop: 'ctime', order: 'descending' }"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                border
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ 'text-align': 'center' }"
                v-loading="loading"
                @row-click="rowClick"
                @sort-change="sort_change"
            >
              <el-table-column type="selection" width="40" />
              <el-table-column prop="id" label="编号"/>
              <el-table-column prop="ctime" label="创建时间" sortable="custom" />
              <el-table-column prop="mtime" label="修改时间" sortable="mtime"/>
              <el-table-column prop="name" label="名称" sortable="name"/>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button size="small" type="primary" @click.native.stop="handleEdit(scope.row)" v-has="`btn.ProductClass.edit`">
                    <el-icon><Edit/></el-icon>
                  </el-button>
                  <el-button size="small" type="danger" @click.native.stop="handleDel(scope.row)" v-has="`btn.ProductClass.delete`">
                    <el-icon><Delete/></el-icon>
                  </el-button>
                </template>
              </el-table-column>
</el-table>

3.4、script

Sortable.create（参数1，参数2）

参数1：可拖动的标签区域，（注意：是你拖拽元素的父级标签，要从解析过的浏览器里看，不能单纯从我们写的代码结构看，因为我们用的el-table是封装的组件。如果这个选择不对的话就拖动不了）

参数2：SortableJs的配置对象，可参考上面SortableJs中文官网

所以document.querySelector('.el-table__body-wrapper tbody') 这样才能正确获取到真正拖拽的父级元素标签（我刚开始踩坑也是因为这个没正确选中）

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

const initDropTable = () => {
  const sortable1 = Sortable.create(
    document.querySelector('.el-table__body-wrapper tbody') as any,
      {
        animation: 500,
        sort: true,
        //拖拽结束后触发
        onEnd: (event:any) => {
          // console.log(event);
          let tableItem=tableData.value[event.oldIndex]
          console.log(tableItem)
          let data={
            id:tableItem.id,
            parent:tableItem.parent || '',
            newIndex:event.newIndex,
            oldIndex:event.oldIndex,
          }
          console.log(data)
            //我这里的逻辑是把移动的行（id,parentId,移动前索引和移动后索引）这些调接口传给后端，然后再更新列表数据即可。看具体需求

        },
        
      }
  );
}