在elementPLUS中，并没有给el-table添加上下拖拽的功能，所以这里我们借助第三方实现（vuedraggable）

1.先安装

// 安装 vuedraggable
npm i -S vuedraggable

2.在需要拖拽的vue文件中引入

import Sortable from "sortablejs"

3.在使用之前，必须要给el-table设置row-key

<el-table :data="tableData" row-key="id">
   <el-table-column prop="name1" label="数据1" align="center" />
   <el-table-column prop="name2" label="数据2" align="center" />　　　　 
</el-table>

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

5.在onMounted中执行

onMounted(() => {
  rowDrop()
})

如此，便可以实现el-table上下拖拽