element plus实现el-table中拖拽

1.安装 vuedraggable

npm i -S vuedraggable

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

import Sortable from "sortablejs"

3.row-key 必须设置

    

        
数据列表
    
    
       
        
　　　　　　 
        
　　　　 
      
　　　　

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) // 排序后和后端的交互函数
          }
      },
    });
  }