如何在vue3项目中的el-talbe组件里使用sortable实现拖拽排序的功能

在Vue3项目中使用el-table组件实现拖拽排序的功能，需要使用sortable插件。以下是实现步骤：

1. 安装sortablejs插件

npm install sortablejs

2. 在组件中引入sortablejs

import Sortable from 'sortablejs';

3. 在mounted钩子函数中初始化sortable

mounted() {
  const table = document.getElementById('table'); // 获取table元素
  const tbody = table.getElementsByTagName('tbody')[0]; // 获取tbody元素
  const rows = tbody.getElementsByTagName('tr'); // 获取所有行元素
  Sortable.create(tbody, {
    animation: 150,
    handle: '.drag-handle', // 拖拽手柄
    onEnd: evt => {
      // 拖拽结束后的回调函数
      console.log(evt);
    }
  });
}

4. 在el-table中添加拖拽手柄

<el-table :data="tableData" id="table">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="操作">
    <template #default="{row}">
      <div class="drag-handle">☰</div>
    </template>
  </el-table-column>
</el-table>

通过以上步骤，即可在el-table组件中实现拖拽排序的功能。