element(-ui 和 -plus)的table实现拖拽排序

首先我要介绍一个超级好用的工具，sortablejs

直接安装yarn add sortablejs, 后在自己的vue文件中引入就可以直接使用了
首先提供element plus 和 -ui的区别只在于 传入Sortable的el。
element-ui: ‘.el-table__body-wrapper tbody’
element-plus: ‘.el-table__body tbody’

    rowDrop() {
      // tbody  拿到你要去操作的拖拽元素的父节点
      const tbody = document.querySelector(
        '.el-table__body tbody',
        // .el-table__body-wrapper tbody
      );
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const that = this;
      new Sortable(tbody, {
        animation: 150, //定义排序动画的时间  单位是ms
        ghostClass: 'blue-background-class', //drop placeholder的css类名  可以不设置
        //开始拖拽
        onStart: function (e) {
          // ...开始拖拽逻辑
        },
        //结束拖拽
        onEnd: function (obj) {
          const list = JSON.parse(
            JSON.stringify(that.tableData),
          );
          const temp = list.splice(obj.oldIndex, 1)[0];
          list.splice(obj.newIndex, 0, temp);
          that.tableData = list;
        },
      });

感谢这个博文让我了解到了sortablejs这个工具
参考博文地址：https://blog.csdn.net/PaPablame/article/details/128126882
工具官网：http://www.sortablejs.com/