VUE3+element plus el-table上下拖拽

在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上下拖拽