使用vue3在element plus中实现el-table实现拖拽

1.安装 vuedraggable

npm i -S vuedraggable

2.在使用的组件，引入。sortablejs包含在vuedraggable

import Sortable from "sortablejs"

3.row-key 必须设置

　　　　<div class="list">
         <div class="f-j-b" style="padding-bottom: 10px;">
           <div>数据列表</div>
         </div>
         <el-table :data="tableData" border row-key="id">
           <el-table-column prop="name1" label="数据1" align="center" />
           <el-table-column prop="name2" label="数据2" align="center" /> 
　　　　　　 <el-table-column prop="originalPrice" label="数据3" align="center" />
　　　　 </el-table>
　　　　</div>

4.在setup()中编写拖拽的逻辑，创建一个Sortable的实例，将需要拖拽的元素给到Sortable实例，进行需要的配置，然后在拖拽结束的方法onEnd()中实现改变排序的逻辑

　　// 表格行拖拽
    const rowDrop = () => {
      let tbody = document.querySelector(".el-table__body-wrapper tbody");
      Sortable.create(tbody, {
        group: { // 相同的组之间可以相互拖拽
          name: "table",
          pull: true,
          put: true,
        },
        animation: 150, // ms, number 单位：ms，定义排序动画的时间
        onAdd: function (e: any) {
          // 拖拽时候添加有新的节点的时候发生该事件
          console.log("onAdd.foo:", e);
        },
        onUpdate: function (e: any) {
          // 拖拽更新节点位置发生该事件
          console.log("onUpdate.foo:", e);
        },
        onRemove: function (e: any) {
          // 删除拖拽节点的时候促发该事件
          console.log("onRemove.foo:", e);
        },
        onStart: function (e: any) {
          // 开始拖拽出发该函数
          console.log("onStart.foo:", e);
        },
        onSort: function (e: any) {
          // 发生排序发生该事件
          console.log("onUpdate.foo:", e);
        },
        onEnd(e: any) {
          // 结束拖拽
          console.log("结束表格拖拽", e);
          // 如果拖拽结束后顺序发生了变化，则对数据进行修改
           if (e.oldIndex !== e.newIndex) {
                moveTable(e.oldIndex, e.newIndex) // 排序后和后端的交互函数
            }
        },
      });
    }

　参考：https://www.itxst.com/vue-draggable/tutorial.html

　　　　https://blog.csdn.net/weixin_40449665/article/details/126160894