Vue3 How to sort element ui plus el-table by sortablejs

This article shows how to use sortablejs component to sort el-table row data.

First, we should add sortablejs component. I use version 1.15.2

"sortablejs": "1.15.2",

 Second, in vue page, import sortablejs component.

import Sortable from "sortablejs";

function initSortable (className){  
  const table = document.querySelector('.' + className + ' .el-table__body-wrapper tbody');
  debugger;  
  let dragTable = Sortable.create(table, {
    animation: 150, 
    disabled: false, 
    handle: ".move", 
    filter: ".disabled", 
    dragClass: "dragClass", 
    ghostClass: "ghostClass", 
    chosenClass: "chosenClass", 
    
    onStart: () => {
      console.log("begin drag");
    },
    // end drage
    onEnd: ({ newIndex, oldIndex }) => {
      console.log(
          "ending drag",
          `original index ${oldIndex}--- new index ${newIndex}`
      );
      const currRow = linkProspectusFiles.value.splice(oldIndex, 1)[0];
      linkProspectusFiles.value.splice(newIndex, 0, currRow);
      console.log(
          "ending drag",linkProspectusFiles.value);
    },
  });
}

function tableRowClassName ({ row })  {
  if (row.disabled) {
    return "disabled";
  }
  return "";
}

onMounted(async () => {
  await nextTick(() => {
    initSortable('t1');
  });
});

Table code:

<el-table class="t1" row-key="name" :data="linkProspectusFiles" border stripe style="width: 100%;margin-top: 20px;">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="url" label="Location"></el-table-column>

  <el-table-column width="150px" label="Operation">
    <template #default="scope">
      <el-button class="move" size="small">
        MOVE
      </el-button>
      <el-button size="small">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

Then click move button and drag the row data.

From：Is Everything OK