超级简单的Vue3实现Element表格拖拽排序

这这里需要使用SortableJs这个库

SortableJS库

安装方式  npm i sortablejs

在页面中引入 ：

import Sortable from "sortablejs";

const RowSort = () => {
  const tbody = document.querySelector(".el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    onEnd({ newIndex, oldIndex }) {
      let newList = [...tableData.value];
      const currRow = newList?.splice(oldIndex, 1)[0];
      newList.splice(newIndex, 0, currRow);
      tableData.value = newList;
//调用接口
      UpdateSort({ id: tableData.value[newIndex].id, sort: newIndex })
        .then((res) => {
          if (res.code == 20000) {
            GetInfo();
          }
        })
        .catch((err) => {});
    },
  });
};

nextTick(() => {
  RowSort ();
});

这样就实现了表格的拖拽功能